创建 Google 美国地图，没有标记，但每个州都有自己的标记（边界）

Question

我是 Google 地图的新手。

我正在寻找使用 Google 地图执行以下操作的方法：

创建一张美国地图，仅显示各州边界
没有针点/标记
状态将具有“鼠标悬停”效果以显示内容（桌面）
各州将有一个“点击”事件来显示内容（移动）

示例：http://maps.debt.com/ccus-geo-map.html（但没有针点/标记并且此地图没有响应）

你们中有人使用 Google 地图见过这样的东西吗？如果见过，在哪里？是否有执行此操作的教程？ google 文档没有帮助，因为显示了标记，这不是想要的结果。

谢谢，

米奇

我在下面使用 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

您必须在地图上加载边界。边界可以是 KML 格式、geoJSON 格式等，并且取决于您可以使用 google 地图 KML Layer or Data Layer 甚至简单的 google.maps.Polygons。

我已经使用 Data Layer 为此创建了一个示例，请查看 this answer on SO（在回答中，运行 javascript 片段并选择 "LOAD US STATES BOUNDARIES" 从地图上方的下拉列表中），它解决了与您的问题非常相似的问题。

边界文件可从 US CENSUS 公开获得（但不确定商业许可，您必须自己检查）作为 shapefiles。有关如何将 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>

创建 Google 美国地图，没有标记，但每个州都有自己的标记（边界）

Create Google Map of the US, no markers, but each state would be its own marker (boundary)

javascript

google-maps

boundary

google-maps-api-3