logo标签列表

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

google-mapsclickpolygoninfowindowopeninfowindowhtml
10

我有一个简单的问题，但在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);

我在地图上放置了一些多边形，现在需要实现的是：当点击每个多边形时，弹出一个“信息窗口”（每个多边形显示不同内容）。

请问有人有想法或示例吗？

非常感谢您的帮助！

你有一个包含13个点的单多边形地图...也许你是想要为点/标记添加信息窗口？ - filip-fku
5个回答
7
我找到了一个非常好的解决方案，可以拥有多个多边形和独立的信息窗口。
这是我的代码：
<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>

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

你好，非常感谢filip-fku！

感谢您的评论，我终于找到了如何做到这一点的方法! :-) 因此，如果有人搜索“如何做到这一点”，这是代码片段：

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

希望这能帮到您！非常感谢Filip的帮助！ :)
很高兴能够帮助。您应该检查叠加层是否确实是多边形，否则此处理程序也将执行标记/添加到地图上的任何其他内容的叠加层。 - filip-fku
好的，我会进行一些测试，看看会发生什么 :) 再次感谢，祝你有美好的一天！ - legibe
1
你和它们中的任何一个有关联吗？ - Andrew Barber
我负责在ikeepuposted.com上实现它。 - nebenaube
请注意，每次链接到您自己的网站/产品时，必须披露此事实。 - Andrew Barber
0

在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存在一些错误，在发布之前应在所有主要浏览器上进行测试，特别是DRAGGING和MOUSEOVER的变化。
这里有一些参考资料：http://code.google.com/apis/maps/documentation/javascript/overlays.html
我正在做这个：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); }); 我可以看到日志消息，但是infoWindow从未显示。有什么想法吗？ - Lawrence I. Siden
@lsiden 没有头绪。8个月前，由于谷歌对商业政策的更改，我停止了编写Google地图的代码。但是，我会简化infowindow并删除控制台调用，以及setPosition和最后一次调用infowindow.open。我在您的代码中没有看到多边形点击侦听器的声明。 - tony gil
1
谢谢@tony_gil。我通过更新Chrome使它工作了。之后就像魔法一样顺利运行！ - Lawrence I. Siden
0

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

那么，让我们开始吧：

  1. 使用map.AddOverlay()添加多边形，地图会存储您的多边形。
  2. 声明一个事件处理程序来捕获对地图的点击。该事件处理程序将传递被点击位置的GLatLng和被点击的覆盖物（在您的情况下是多边形）。您可以进行简单的类型测试来判断覆盖物是否为多边形。
  3. 在事件处理程序中使用map.openInfoWindowHtml()，传递提供的GLatLng作为位置以及要显示的HTML内容。

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

  • 向地图添加事件处理程序
  • 检查覆盖物的类型

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

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

祝你好运！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接