谷歌地图:如何通过点击打开多边形的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参考。

所以，让我们开始吧：

如果您正在使用map.AddOverlay()添加多边形，则地图会将您的polygons.

• Declare存储为一个事件处理程序，该处理程序可捕获对地图的单击。(

1. )将向该事件处理程序传递所单击位置的GLatLng，以及所单击的覆盖(在本例中为多边形)。您可以执行一个简单的类型测试来确定覆盖是否为多边形。事件处理程序中的
2. 使用map.openInfoWindowHtml()，传递作为位置提供的GLatLng和要显示的HTML内容。

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

• 将事件处理程序添加到地图
• 检查叠加

的类型

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

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

祝好运!

Answer 2

我找到了一个非常好的解决方案，让多个多边形具有单独的背景。

下面是我的代码：

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

嗨，非常感谢filip-fku！

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

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

希望这能有所帮助！

再次感谢filip！:)