带有标签的信息窗口（Infobubble）仅显示添加的最后一个标记的内容（通过 PHP/Mysql））答案

【问题标题】：Infowindows with tabs (Infobubble) only displaying content from last marker added (via PHP/Mysql))带有标签的信息窗口（Infobubble）仅显示添加的最后一个标记的内容（通过 PHP/Mysql））
【发布时间】：2012-11-05 22:30:30
【问题描述】：

好的，我一直在尝试在一个填充了许多标记的地图上实现 Infobubbles with tabs，这些标记是通过 ajax 调用（使用 this tutorial from Google 构建的）从 Mysql 数据库中恢复的。

点击事件对每个标记的反应都很好，但问题是每个信息气泡在选项卡中显示相同的 html 内容，我猜从添加的最后一个标记开始......肯定有一个关闭问题，但我觉得暂时没用，这快把我逼疯了！感谢您提供任何帮助...

function init() {

    var mapCenter = new google.maps.LatLng(48.204612, 7.419058);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 9,
      center: mapCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infoBubble = new InfoBubble({
        map: map,
        maxWidth: 300,
        disableAnimation: true
    });

    // Get markers and info from the database
downloadUrl("phpsqlajax_genxml3.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var description = markers[i].getAttribute("description");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
        var html = "<b>" + name + "</b> <br/>" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
        map: map,
        title: name,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow,
        });

        google.maps.event.addListener(marker, 'click', function() {
        if (!infoBubble.isOpen()) {
        infoBubble.open(map, this); 
        }
        });

        google.maps.event.addListener(map, "click", function(){
        infoBubble.close();
        });
    }

infoBubble.addTab('Tab1', html);
infoBubble.addTab('Tab2', description);

});
}

【问题讨论】：

标签： database tabs maps infobubble

【解决方案1】：

因为您的 infoWindow 只创建一次，并且仅在代码执行开始时创建。您需要将 infoWindow 的初始化放在 click 事件中或使用方法 setContent 修改标记单击的内容

【讨论】：

感谢您的回答！当我在这个问题上摸不着头脑时，我最终决定使用 Infobox 插件和 Jquery UI 选项卡的组合，结果证明它比 Infobubble 更具可定制性。