【问题标题】:Multiple infoBubbles in google maps api shows just last added谷歌地图 api 中的多个 infoBubbles 显示刚刚添加
【发布时间】:2014-11-21 16:13:18
【问题描述】:

我在 google maps api v3 中遇到 infoBubble 问题。我从 db 加载标记并为该标记添加 infoBubbles。但是从最后添加的标记开始使用 infoBubble。你能看看问题吗?

 var gmarkers = [];
 var map;

 function load() {

     var defaultLocation = new google.maps.LatLng(49.8248188, 15.4684482);

     var map = new google.maps.Map(document.getElementById("map"), {
         center: defaultLocation,
         zoom: 8,
         mapTypeId: 'roadmap'
     });

     downloadUrl("generatexml.php", function (data) {
         var xml = data.responseXML;
         var markers = xml.documentElement.getElementsByTagName("marker");
         for (var i = 0; i < markers.length; i++) {
             var id = markers[i].getAttribute("id");
             var name = markers[i].getAttribute("name");
             var point = new google.maps.LatLng(
             parseFloat(markers[i].getAttribute("lat")),
             parseFloat(markers[i].getAttribute("lng")));
             var marker = new google.maps.Marker({
                 map: map,
                 position: point
             });

             var infoBubble = new InfoBubble({
                 content: '<div' + name + '</div',
                 boxClass: 'info-box',
                 alignBottom: true,
                 pixelOffset: new google.maps.Size(-150, -40),
                 maxWidth: 300,
                 disableAutoPan: false,
                 hideCloseButton: false,
             });

             google.maps.event.addListener(marker, 'click', function () {
                 infoBubble.open(map, marker);
                 console.log(infoBubble.content);
             });

             gmarkers.push(marker);

         }
     });
 }

【问题讨论】:

  • 这看起来像是一个关闭问题 - 查看这个答案 stackoverflow.com/a/7054057/1370442
  • 这个网站上有许多相同的问题。请搜索。除此之外,您应该着眼于创建单个 infoWindow 对象并动态设置其内容。只是一个提示。
  • 哦,谢谢,我使用了 infoBubble,所以我不关心 infoWindow。谢谢
  • 对不起,我没看到。这同样适用于infoBubble。如果我没记错的话,它一定有一个setContent 方法。当然,这适用于您不需要同时打开多个气泡的情况。

标签: jquery google-maps google-maps-api-3 infobubble


【解决方案1】:

找到了,直接替换:

google.maps.event.addListener(marker, 'click', function () {

            infoBubble.open(map, marker);
            console.log(infoBubble.content);

        });

与:

google.maps.event.addListener(marker, 'click', function () {

                   infoBubble.setContent(this.content);
                   infoBubble.open(map, this);

         });

感谢您的帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-07-05
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多