Google 地图 - 将 InfoWindows 附加到数组中的多边形

Question

我整个上午都在用这个头撞墙。我创建了一个多边形数组，并希望将每个多边形中的一些数据关联起来，这些数据将显示在信息窗口中。我可以看到地图上的所有多边形。我添加了侦听器，它会触发（发生颜色变化），但我没有得到 infoWindow。任何帮助将不胜感激！

干杯!

丙...

tmppoly = new google.maps.Polygon({
   map: map,
   paths: polypath,
   strokeColor: scolor,
   strokeOpacity: 0.5,
   strokeWeight: 2,
   fillColor: fcolor,
   fillOpacity: 0.5
});

addPolygonClick(tmppoly,mdata);
plot_polygons.push(tmppoly);

...

function addPolygonClick(poly,html) {

    infowindow = new google.maps.InfoWindow(
    { 
        content: html
    });

    google.maps.event.addListener(poly,'click', function(event) {
        this.setOptions({fillColor: "#000000"});
        infowindow.open(map);
    }); 

}

Answer 1

我可以针对你的问题提供一些有用的建议。

首先，您应该了解“infowindow.open(map,anchor?:MVCObject)”方法的表达式。正如 google api v3 所说：在核心 API 中，唯一的锚点是 Marker 类。 Polygon类不符合条件，但是，我们可以通过另一种方式实现。

var polygon = new google.maps.Polygon({
    paths: PGpoints,   //The PGpoints is the collection of points around this polygon.
    map: map,
    strokeColor: colory,
    strokeOpacity: 0.6,
    strokeWeight: 1,
    fillColor: colory,
    fillOpacity: 0.35       
});

polygon.set("Info", idy);  // Set some attributes for adding extra information into this polygon.   

google.maps.event.addListener(polygon, 'click', function() {
    var infoWindow = new google.maps.InfoWindow();
    infoWindow.setContent("Information : " + polygon.get("Info"));

    // 'laty,lngy' is the location of one point in PGpoints, which can be chosen as you wish
    infoWindow.setPosition(new google.maps.LatLng(laty,lngy));     
    infoWindow.open(map);
});

上面的代码已经测试通过，可以直接使用。然后，如果您单击一个多边形，信息窗口将出现在地图上方。

Answer 2

有一些问题可能会阻止此操作：

1：
您需要在 infowindow 前面添加一个 var，使其成为局部变量：

var infowindow = new google.maps.InfoWindow(...

实际上，每次添加新的点击侦听器时都会替换 infowindow 变量。

2：
您需要指定信息窗口的位置或锚点（请参阅：http ://code.google.com/apis/maps/documentation/javascript/reference.html#InfoWindowOptions）。

唯一有效的锚点是标记，因此您可能需要指定“位置”属性。 “position”必须是有效的 google.maps.LatLng 对象。我怀疑您会想要计算多边形的中心以用作位置。

您还需要确保 map 是一个全局变量，尽管它可能正在查看代码的其余部分。

Answer 3

请查看此https://developers.google.com/maps /documentation/javascript/examples/event-closure 并将其与上面的响应结合起来，为多边形数组中的每个多边形分配唯一的消息。

我还致力于在一层中包含多个多边形，并为每个多边形提供唯一的消息。我还没有成功。通过上面的响应，我显示了信息窗口，但我对所有多边形都得到了相同的消息。
一旦我解决了我的问题，我就会发布解决方案。