带有选项卡的信息窗口(Infobubble)仅显示最后添加的标记的内容(通过PHP/Mysql))



好的,我一直在尝试在地图上用选项卡实现Infobubbles,该地图上填充了许多标记,通过ajax调用从Mysql数据库中恢复(使用谷歌的本教程构建)。

点击事件对每个标记的反应都很好,但问题是每个infobubble都在选项卡中显示相同的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);
});
}

因为您的infoWindow只创建过一次,而且只在代码执行开始时创建。您需要将infoWindow的初始化放在点击事件中,或者使用方法setContent来修改标记点击上的内容

相关内容

  • 没有找到相关文章

最新更新