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

我找到了一个非常好的解决方案，可以将多个多边形与单独的信息窗一起使用。

这是我的代码：

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

它还提供了通过再次单击相同的多边形来关闭Infowindows的功能。

Answer 2

嗨，非常感谢filip-fku！

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

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

希望这有帮助！

再次感谢filip！：）

Answer 3

不需要全球信息系统。在事件处理程序工作的一侧初始化infowindow。使用此原型来检查点是否包含在多边形数组中的多边形实例中。

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

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

有一个有效的例子

Answer 4

我将描述解决方案，因为我暂时没有使用API，并且很难上传任何更大量的代码 - 这里不用于代码编辑功能。有关详细信息，请参阅API参考。

所以，让我们开始吧：

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

这很简单！您将不得不查看如何附加事件处理程序，因为我不记得我头脑中的具体细节。因此，您需要在API中查找的内容包括：

向地图添加事件处理程序
检查叠加层的类型

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

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

Answer 5

在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非常错误，应该在发布之前在所有主流浏览器上进行测试，尤其是DRAGGING和MOUSEOVER的变体。

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

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

5 个答案: