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

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

有人有想法或例子吗？

非常感谢你的帮助 ！

4

5 回答 5

6

我找到了一个非常好的解决方案，可以让多个多边形带有单独的信息窗口。

这是我的代码：

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

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

于 2012-08-09T11:52:32.257 回答
2

嗨，非常感谢 filip-fku ！

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

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

希望这能有所帮助！

再次感谢菲利普！:)

于 2010-05-18T20:19:39.543 回答
1

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

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

http://www.ikeepuposted.com/area_served.aspx有一个功能示例

于 2012-09-30T23:14:25.227 回答
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”），以便您可以在其他函数中更改它们。这确实证明信息窗口行为很棘手。有些人更喜欢 infowindow 的实例，我宁愿拥有一个全局实例并即时更改其内容。当心变量声明的影响！

其他多边形的 addListener 有很多错误，应该在发布前在所有主要浏览器上进行测试，特别是 DRAGGING 和 MOUSEOVER 的变体。

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

于 2012-02-04T00:28:47.290 回答
0

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

那么，让我们开始吧：

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

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

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

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

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

祝你好运！

于 2010-05-17T01:49:01.103 回答