javascript - 创建美国谷歌地图，没有标记，但每个州都有自己的标记(边界)

Question

我是 Google map 新手。

我正在寻找一种使用 Google map 执行以下操作的方法:

1. 创建美国 map ，仅显示各州的边界
2. 没有针点/标记
3. 状态将具有“鼠标悬停”效果来显示内容(桌面)
4. 各州将有一个“点击”事件来显示内容(移动设备)

示例:http://maps.debt.com/ccus-geo-map.html (但没有定位点/标记，并且该 map 不响应)

你们中有人使用 Google map 看到过类似的情况吗？如果有，在哪里？有执行此操作的教程吗？谷歌文档没有帮助，因为显示了标记，这不是想要的结果。

谢谢

米奇

我使用 Google 文档在下面创建的代码示例，但这也没有提供所需的结果...

    function initialize() {

    var locations = [
    ['California (LOS ANGELES)', 34.0522, -118.2437, 1],
    ['Florida (MIAMI)', 25.7617, -80.1918, 2],
    ['Maine (HOULTON)', 46.1262, -67.8402, 3],
    ['Washington (CLALLAM)', 48.253517, -124.257798, 4]
    ];
    var mapProp = {
        center: new google.maps.LatLng(39.8282, -98.5795), /* exact center of the US */
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        /*
            ROADMAP (normal, default 2D map)
            SATELLITE (photographic map)
            HYBRID (photographic map + roads and city names)
            TERRAIN (map with mountains, rivers, etc.)
        */
    };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    var marker, i;
    var markers = new Array();
    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });
        markers.push(marker);
        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }
}
google.maps.event.addDomListener(window, 'load', initialize)

Answer 1

您必须在 map 上加载边界。边界可以是 KML 格式、geoJSON 格式等，根据具体情况，您可以使用谷歌地图 KML Layer或Data Layer甚至是简单的 google.maps.Polygon。

我使用数据层为此创建了一个示例，请查看this answer on SO (作为回答，运行 JavaScript 代码片段并从 map 上方的下拉列表中选择“加载美国州边界”)，它解决了与您的问题非常相似的问题。

边界文件可从US CENSUS公开获得(但不确定商业许可，您必须自己检查)作为 shapefile 。有关如何将 shapefile 转换为所需格式的更多信息，请阅读引用的答案。

编辑

为了完整起见，以下是仅包含美国各州边界以及悬停和单击监听器的工作示例:

var map = null;
var my_boundaries = {};
var data_layer;
var info_window;

//initialize map on document ready
$(document).ready(function(){
	var latlng = new google.maps.LatLng(20.723080, -73.984340); //you can use any location as center on map startup
	var myOptions = {
		zoom: 2,
		center: latlng,
		mapTypeControl: true,
		mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
		navigationControl: true,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	google.maps.event.addListener(map, 'click', function(){
		if(info_window){
			info_window.setMap(null);
			info_window = null;
		}
	});
	loadBoundariesFromGeoJson("https://raw.githubusercontent.com/matej-pavla/Google-Mapshttps://raw.githubusercontent.com/matej-pavla/Google-Maps-Examples/master/BoundariesExample/geojsons/us.states.geo.json");
});

function initializeDataLayer(){
	if(data_layer){
		data_layer.forEach(function(feature) {
			data_layer.remove(feature);
		});
		data_layer = null;
	}
	data_layer = new google.maps.Data({map: map}); //initialize data layer which contains the boundaries. It's possible to have multiple data layers on one map
	data_layer.setStyle({ //using set style we can set styles for all boundaries at once
		fillColor: 'white',
		strokeWeight: 1,
		fillOpacity: 0.1
	});

	data_layer.addListener('click', function(e) { //we can listen for a boundary click and identify boundary based on e.feature.getProperty('boundary_id'); we set when adding boundary to data layer
		var boundary_id = e.feature.getProperty('boundary_id');
		var boundary_name = "NOT SET";
		if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name;
		if(info_window){
			info_window.setMap(null);
			info_window = null;
		}
		info_window = new google.maps.InfoWindow({
			content: '<div>You have clicked a boundary: <span style="color:red;">' + boundary_name + '</span></div>',
			size: new google.maps.Size(150,50),
			position: e.latLng, map: map
		});
	});

	data_layer.addListener('mouseover', function(e) {
		data_layer.overrideStyle(e.feature, {
			strokeWeight: 3,
			strokeColor: '#ff0000'
		});
		var boundary_id = e.feature.getProperty('boundary_id');
		var boundary_name = "NOT SET";
		if(boundary_id && my_boundaries[boundary_id] && my_boundaries[boundary_id].name) boundary_name = my_boundaries[boundary_id].name;
		$('#bname').html(boundary_name);
	});

	data_layer.addListener('mouseout', function(e) {
		data_layer.overrideStyle(e.feature, {
			strokeWeight: 1,
			strokeColor: ''
		});
		$('#bname').html("");
	});
}

function loadBoundariesFromGeoJson(geo_json_url) {
	initializeDataLayer();
	$.getJSON(geo_json_url, function (data) {
		if (data.type == "FeatureCollection") { //we have a collection of boundaries in geojson format
			if (data.features) {
				for (var i = 0; i < data.features.length; i++) {
					var boundary_id = i + 1;
					var new_boundary = {};
					if (!data.features[i].properties) data.features[i].properties = {};
					data.features[i].properties.boundary_id = boundary_id; //we will use this id to identify boundary later when clicking on it
					data_layer.addGeoJson(data.features[i], {idPropertyName: 'boundary_id'});
					new_boundary.feature = data_layer.getFeatureById(boundary_id);
					if (data.features[i].properties.name) new_boundary.name = data.features[i].properties.name;
					if (data.features[i].properties.NAME) new_boundary.name = data.features[i].properties.NAME;
					my_boundaries[boundary_id] = new_boundary;
				}
			}
		}
	});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("maps", "3",{other_params:"sensor=false"});
</script>
<body style="margin:0px; padding:0px;" >
     <div style="float:left;clear:both;height:15px;">
       You are hovering over: <span id="bname" style="font-weight:bold"></span></div>
	<div id="map_canvas" style="height:400px; width:500px;"></div>
</body>