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);

多边形出现在我的地图上，没问题。 但我现在要做的是打开一个“信息窗口”，点击每个多边形（每个多边形有不同的内容）

有人有想法或例子吗

---

非常感谢你的帮助

我将介绍这个解决方案，因为我已经有一段时间没有使用API了，并且很难上传更多的代码-这里的代码编辑功能没有用到。有关详细信息，请参阅API参考

那么，让我们开始：

您正在使用map.AddOverlay（）添加多边形，然后贴图将存储您的多边形

声明一个事件处理程序，用于捕获映射的单击。该事件处理程序将被传递一个被单击位置的GLatLng和被单击的覆盖（在您的例子中是多边形）。您可以进行简单的类型测试，以确定覆盖是否为多边形

在事件处理程序中，使用map.openInfoWindowHtml（），传递作为位置提供的GLatLng和要显示的HTML内容

就这么简单！您将不得不查看如何附加事件处理程序，因为我记不清这些细节。因此，您需要在API中查找以下内容：

• 向映射添加事件处理程序
• 检查覆盖的类型

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

---

祝你好运

大家好，非常感谢菲利普·fku

感谢您的评论，我终于找到了如何做到这一点！：-） 因此，如果有人搜索“如何做到这一点”，下面是代码片段：

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

GEvent.addListener（区域向上，点击），功能（覆盖，板条）{
openInfoWindowHtml（覆盖，您的html内容：
等等）；
});

希望这能有所帮助

---

再次感谢菲利普！：）

在V3中，您仍然可以使用infowindow，但语法不同：

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);

我已经创建了polygon和eventlistener全局变量（通过在变量声明中抑制“var”），以便您可以在其他函数中修改它们。事实证明，infowindow的行为确实很棘手。有些人更喜欢infowindow的实例，我更希望有一个全局实例，并动态更改其内容。注意变量声明的影响

其他addListener for polygons有很多缺陷，在发布之前应该在所有主要浏览器上进行测试，尤其是拖动和鼠标悬停的变体

---

这有一些参考：

我发现了一个非常好的解决方案，即使用单个信息窗口创建多个多边形

这是我的密码：

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

var映射；
var城市={
“汉堡”：[
[53.60, 9.75],
[53.73, 10.19],
[53.48, 10.22]
],
“汉诺威”：[
[52.34, 9.61],
[52.28, 9.81],
[52.43, 9.85]
],
“不来梅”：[
[53.22, 8.49],
[53.12, 8.92],
[53.02, 8.72]
]
};
var opened_info=new google.maps.InfoWindow（）；
函数init（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（53,9.2），
mapTypeId:google.maps.mapTypeId.TERRAIN
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
for（城市中的var c）{
var coods=城市[c]
var polyPath=[]；
对于（j=0；j“，
});
shape.infowindow.name=c；
setMap（map）；
google.maps.event.addListener（形状为“点击”，显示信息）；
}
}
;
函数showInfo（事件）{
打开_info.close（）；
if（opened_info.name！=this.infowindow.name）{
this.infowindow.setPosition（event.latLng）；
this.infowindow.open（map）；
打开的_info=this.infowindow；
}
}

---

它还提供了通过再次单击同一多边形来关闭信息窗口的功能。

无需全局信息窗口。在事件处理程序工作时初始化infowindow。 使用此原型检查点是否包含在多边形数组中的多边形实例中

---

在

中有一个运行示例，您有一个包含13个点的单个多边形的地图。。。也许你在寻找点/标记的信息窗口？很高兴我能帮上忙。您可能应该检查单击的覆盖是否为多边形，否则此处理程序也将执行标记/您作为覆盖添加到地图中的任何其他内容。好的，我将对此进行一些测试，以查看发生的情况：）再次感谢，祝您愉快！您是否与其中任何一方有关联？我负责在ikeepuposted.comOK实施该计划；请记住，每次链接到自己的网站/产品时都需要披露这一事实。我正是这样做的：google.maps.event.addListener（alertPolygon，'click'，function（ev）{console.log（ev）；console.log（alertText）；var infoWindow=new google.maps.infoWindow({content:alertText}）；infoWindow.setPosition（ev.latLnt）；infoWindow.open（map）；