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

问题描述

我想使用Google地图显示突出显示的多边形。这个想法是，所讨论的多边形将被正常显示，并且地图的其余部分应该稍微变暗。

下面是一个我想用奥地利的多边形完成的示例图片：替代文字http://a.imagehost.org/0613/google_maps_tint_example.png

不幸的是，我是一个完整的菜鸟到谷歌地图API和一般地图的东西。

那么，这甚至可以用Google Map API来做到这一点吗？如果是的话，用什么版本（v2，v3）？使用其他地图工具包，比如openlayers，会更容易吗？

PS：我的一个想法是构建一个逆多边形（在这个例子中，整个世界减去奥地利的形状），然后用这个倒置的多边形显示一个带有透明度的黑色覆盖层。但是这对我来说似乎相当复杂。

解决方案

Google Maps API v3可让您绘制多边形。以下是Google的五角大楼示例。这比尝试反转多边形要容易得多。基本上，创建一个比你所需要的大的多边形的坐标。这将始终是多边形数组中的第一个多边形。您突出显示的区域将始终是第二个多边形。

以下代码可用于更改Google的百慕大三角形演示使用带孔洞的多边形：

  var everythingElse = [
 new google.maps.LatLng（0，-90），
 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），
 google.maps.LatLng（18.466465， -66.118292），
 new google.maps.LatLng（32.321384，-64.75737），
 new google.maps.LatLng（25.774252，-80.190262）
]; 
 
 
 
 $ b bermudaTriangle = new google.maps.Polygon（{
 paths：[everythingElse，triangleCoords]，
 strokeColor：＃ 000000，
 strokeOpacity：0.8，
 strokeWeight：2，
 fillColor：＃000000，
 fillOpacity：0.5 
}）; 
 
 bermudaTriangle.setMap（map）; 
  

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.

Here's an example image what I would like to accomplish with a polygon from Austria: alt text http://a.imagehost.org/0613/google_maps_tint_example.png

Unfortunately, I'm a complete rookie when it comes to Google Maps API's and map stuff in general.

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: 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 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.

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屋！