谷歌地图 ：如何通过单击打开多边形的信息窗口？

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

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

有人有想法或例子吗？

非常感谢你的帮助 ！

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

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

这是我的代码：

<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

Hi和感谢很多菲利普 - FKU！

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

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

希望本文能帮助！

再次感谢菲利普！ ：）

Answer 4

没有全球信息窗口需要。初始化侧事件处理工作的信息窗口。 使用此protoype以检查点被包含在多边形的阵列中的多边形的一个实例。

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

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

Answer 5

在V3，则仍然使用信息窗口，但具有不同的语法：

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

我已经作出的多边形和事件侦听全局变量（通过抑制变量声明“VAR”），这样就可以改变它们的其它功能。这也证明棘手与信息窗口的行为。有些人喜欢的信息窗口的情况下，我宁愿有一个全局实例，并改变其在飞行中的内容。提防的变量声明的效果！

其他的addListener多边形相当车和应在出版之前所有主要浏览器进行测试，尤其是拖放鼠标悬停的变化。

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