使用 Google 地图突出显示多边形并为地图的其余部分着色 [英] Highlight polygon and tint rest of map using Google Maps

问题描述

我想使用 Google 地图显示突出显示的多边形.这个想法是有问题的多边形将正常显示，地图的其余部分应该变暗一点.

I'd like to display a highlighted polygon using Google Maps. The idea is that the polygon in question would be displayed normally and the rest of the map should be darkened a little bit.

那么，这甚至可以通过 Google Map API 来实现吗?如果是，使用什么版本(v2、v3)?使用其他地图工具包(例如 openlayers)会更容易吗?

So, is this even possible do this with Google Map API's? If yes, with what version (v2, v3)? Would it be easier to do it with other map toolkits, like openlayers?

PS:我有一个想法，是建立一个倒多边形(在这个例子中，整个世界减去奥地利的形状)，然后使用这个倒多边形显示一个具有透明度的黑色叠加层.但这对我来说似乎很复杂.

PS: One idea I had, was to build an inverse polygon (in this example, the whole world minus the shape of austria) and then display a black colored overlay with transparency using this inverted polygon. But that seems to be quite complicated to me.

推荐答案

Google Maps API v3 可让您绘制 多边形 带孔.这是 Google 的 Pentagon 示例.这比尝试反转多边形要容易得多.基本上，为比您需要的更大的巨型多边形创建坐标.这将始终是多边形数组中的第一个多边形.您突出显示的区域将始终是第二个多边形.

Google Maps API v3 lets you draw polygons with holes. Here's Google's Pentagon example. It is much easier than trying to invert a polygon. Basically, create coordinates for a giant polygon that is bigger than you would ever need. That will always be the first polygon in your polygon array. The area you are highlighting will always be the second polygon.

这里有一些代码可以更改 Google 的百慕大三角演示 使用带孔的多边形:

Here's some code to change Google's Bermuda Triangle demo to use a polygon with a hole:

  var everythingElse = [
    new google.maps.LatLng(0, -90),
    new google.maps.LatLng(0, 90),
    new google.maps.LatLng(90, -90),
    new google.maps.LatLng(90, 90),
  ];



  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];




  bermudaTriangle = new google.maps.Polygon({
    paths: [everythingElse, triangleCoords],
    strokeColor: "#000000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#000000",
    fillOpacity: 0.5
  });

  bermudaTriangle.setMap(map);

这篇关于使用 Google 地图突出显示多边形并为地图的其余部分着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！