谷歌地图：如何通过点击打开一个多边形的InfoWindow？

Question

我有一个简单的问题，但我无法在Google Maps API文档中找到答案...

我有一张由API绘制的具有13个多边形的地图。下面是这些多边形之一的为例：

var zone_up_montblanc = new GPolygon([ 
     new GLatLng(46.21270329318585, 6.134903900311617), 
     new GLatLng(46.20538443787925, 6.136844716370282), 
     new GLatLng(46.20525043957647, 6.141375978638086), 
     new GLatLng(46.20698751554006, 6.148050266912262), 
     new GLatLng(46.21110286985207, 6.153203229026629), 
     new GLatLng(46.21730757985668, 6.151718301267355), 
     new GLatLng(46.22092122197341, 6.153676364285801), 
     new GLatLng(46.22615123408969, 6.149844858907489), 
     new GLatLng(46.22851200024137, 6.149876939987202), 
     new GLatLng(46.22945159836955, 6.142758190170017), 
     new GLatLng(46.21735908463437, 6.141457132705133), 
     new GLatLng(46.21753573755057, 6.138058122426195), 
     new GLatLng(46.21270329318585, 6.134903900311617) 
     ], "#6b1f43", 2, 0.9, "#92c87f", 0.5); 

则：

map.addOverlay(zone_up_montblanc); 

多边形出现在我的地图，没有问题。 但我现在要做的事情是通过点击每个多边形（每个多边形的内容不同）来打开“InfoWindow”。

有人有想法或例子吗？

非常感谢您的帮助！

Answer 1

我将介绍解决方案，因为我在一段时间内没有使用API​​，并且很难上传任何大量的代码 - 这里没有用到代码编辑功能。有关详细信息，请参阅API参考。

所以，让我们开始：

1. 你加入使用map.AddOverlay多边形（），地图然后存储您的多边形。
2. 声明一个捕获点击到地图的事件处理程序。该事件处理程序将被传递一个点击位置的GLatLng，以及被点击的叠加层（在你的情况下是多边形）。你可以做一个简单的类型测试来决定叠加是否是一个多边形。
3. 在事件处理程序中使用map.openInfoWindowHtml（），传递提供的位置的GLatLng以及要显示的HTML内容。

这很简单！你将不得不查看你如何附加事件处理程序，因为我不记得头脑中的细节。这样的事情你需要查找的API中：

• 添加事件处理地图
• 检查的覆盖类型

你应该能够找到调用的方法和在API页面上的所有信息：

http://code.google.com/apis/maps/documentation/reference.html

祝你好运！

Answer 2

嗨，谢谢很多filip-fku！

感谢您的评论，我finnaly找到如何做到这一点！ :-) 所以，如果有人搜索“如何做到这一点”，这里是代码片段：

GEvent.addListener(zone_up_champagne, "click", function(overlay,latlng) { 
    map.openInfoWindowHtml(overlay, '<strong>Your html things :</strong><br />etc...'); 
}); 

希望本文能帮助！

再次感谢filip！:)

在V3

Answer 3

，你仍然会使用信息窗口，但不同的语法：

function initialize() { 

// SOME CODE 
var mont_blanc_path_array = [ 
new google.maps.LatLng(46.21270329318585, 6.134903900311617), 
new google.maps.LatLng(46.20538443787925, 6.136844716370282), 
new google.maps.LatLng(46.20525043957647, 6.141375978638086) 
]; 
zone_up_montblanc = new google.maps.Polygon({ 
    editable: false,  
    paths: mont_blanc_path_array,  
    fillColor: "#0000FF", 
    fillOpacity: 0.5, 
    strokeColor: "#FF0000", 
    strokeOpacity: 1.0,  
    strokeWeight: 2 
}); 
// Creating InfoWindow object 
var infowindow = new google.maps.InfoWindow({ 
    content: ' ', 
    suppressMapPan:true 
}); 
eventPolygonClick = google.maps.event.addListener(zone_up_montblanc, 'click', function() { 
    // MORE CODE OR FUNCTION CALLS 
}); 
// MORE CODE 

} 

任何地方，你觉得像更改文本和显示信息窗口：

infowindow.setContent("CLICKED me"); 
infowindow.open(map, zone_up_montblanc); 

我已经多边形和eventlistener全局变量（通过抑制变量声明中的“var”），以便您可以在其他函数中修改它们。这对于infowindow行为来说确实很棘手。有些人更喜欢infowindow的实例，我宁愿有一个全局实例并在运行中改变它的内容。注意变量声明的效果！

多边形的其他addListener相当麻烦，应在发布前在所有主流浏览器上进行测试，特别是DRAGGING和MOUSEOVER的变体。

这有一定的参考：http://code.google.com/apis/maps/documentation/javascript/overlays.html

Answer 4

我发现了一个非常好的解决方案，有个人信息窗口多个多边形。

这里是我的代码：

<script type="text/javascript" 
     src="https://maps.google.com/maps/api/js?sensor=false"> 
</script> 
<script type="text/javascript" charset="utf-8"> 

    var map; 
    var cities = { 
     "Hamburg":[ 
      [53.60, 9.75], 
      [53.73, 10.19], 
      [53.48, 10.22] 
     ], 
     "Hannover":[ 
      [52.34, 9.61], 
      [52.28, 9.81], 
      [52.43, 9.85] 
     ], 
     "Bremen":[ 
      [53.22, 8.49], 
      [53.12, 8.92], 
      [53.02, 8.72] 
     ] 
    }; 
    var opened_info = new google.maps.InfoWindow(); 

    function init() { 
     var mapOptions = { 
      zoom:8, 
      center:new google.maps.LatLng(53, 9.2), 
      mapTypeId:google.maps.MapTypeId.TERRAIN 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 
     for (var c in cities) { 
      var coods = cities[c] 
      var polyPath = []; 
      for (j = 0; j < coods.length; j++) { 
       polyPath.push(new google.maps.LatLng(coods[j][0], coods[j][1])); 
      } 
      var shape = new google.maps.Polygon({ 
       paths:polyPath, 
       fillColor:"#00FF00", 
       fillOpacity:0.6, 
      }); 
      shape.infowindow = new google.maps.InfoWindow(
        { 
         content:"<b>" + c + "</b>" + "</br>", 
        }); 
      shape.infowindow.name = c; 
      shape.setMap(map); 
      google.maps.event.addListener(shape, 'click', showInfo); 
     } 

    } 
    ; 

    function showInfo(event) { 
     opened_info.close(); 
     if (opened_info.name != this.infowindow.name) { 
      this.infowindow.setPosition(event.latLng); 
      this.infowindow.open(map); 
      opened_info = this.infowindow; 
     } 
    } 

</script> 

它还提供了功能再次点击相同的多边形，关闭信息窗口。

Answer 5

没有全球infowindow需要。初始化事件处理程序工作的infowindow。 使用此原型检查点是否包含在多边形数组中的多边形实例中。

http://hammerspace.co.uk/projects/maps/

有一个在http://www.ikeepuposted.com/area_served.aspx