谷歌地图:阴影城市

时间:2015-08-04 08:30:19

标签: javascript google-maps maps google-visualization

我搜索了很多,但我找不到如何在谷歌地图上遮蔽城市区域。这可以使用Google Charts完成,但不是交互式的。我希望它与谷歌地图完全一样,但有边框。 E.g在谷歌地图上搜索达拉斯并看到它绘制边界。我想要在我的网站上显示这个。我想在同一张地图中显示多个城市边界。

1 个答案:

答案 0 :(得分:2)

Google maps API不提供此功能。因此,如果要突出显示区域,则必须根据状态边界的纬度/长度创建自定义叠加。

一旦你有了lat / long的边框,就必须自己绘制多边形。

例如:

// Define the LatLng coordinates for the polygon's path.
    var washingtonShapeCoords = [new google.maps.LatLng(38.8921, -76.9112),
                           new google.maps.LatLng(38.7991, -77.0320),
                           new google.maps.LatLng(38.9402, -77.1144),
                           new google.maps.LatLng(38.9968, -77.0430),
                           new google.maps.LatLng(38.8996, -76.9167),
                           new google.maps.LatLng(33.7243, -74.8843),
                           new google.maps.LatLng(33.7243, -72.6870),
                           new google.maps.LatLng(32.3243, -72.6870),
                           new google.maps.LatLng(32.3985, -76.7300),
                           new google.maps.LatLng(33.7152, -76.6957),
                           new google.maps.LatLng(33.7243, -74.9489),
                           new google.maps.LatLng(38.8921, -76.9112)];

// Construct the polygon.
  washingtonPolygon = new google.maps.Polygon({
    paths: washingtonShapeCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  washingtonPolygon.setMap(map);