谷歌地图信息泡沫中的代码第一次不能工作

在infoBubble谷歌地图中我添加了一个函数，但是第一次打开infoBubble时，代码不能工作，如果我打开第二个infoBubble或关闭第一个infoBubble并重新打开，代码就可以工作。请帮助。这是我的页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<script>
var infoBubble = new InfoBubble();
var infowindow = new google.maps.InfoWindow(); 
var map;
function initialize() {   
var config = {
    el: 'map',
    lat: 40.2329,
    lon: -3.42,
    zoom: 10,
    type: google.maps.MapTypeId.ROADMAP
};
var data = [        
['Giorgio Rossi',  40.15, -3.42,  '1' ], 
['Marta Bianchi',  40.25, -3.42,  '2'],
['Carlo Verdi',    40.15, -3.62,  '3'],
['Mario Giallo',   40.25, -3.62,  '4'],    
];
    var map = new google.maps.Map(document.getElementById(config.el), {
        zoom: config.zoom,
        scrollwheel: false,
        center: new google.maps.LatLng(config.lat, config.lon),
        mapTypeId: config.type
    });
 var markers = [];
 var i ;
    for (i = 0; i < data.length; i++) {          
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(data[i][1], data[i][2]),              
            map: map
        });           
marker.info = '<div id="'+data[i][3]+ '">'+data[i][0]+ '</div>';           
marker.html = '<div style="padding:25px"><a class="testClass" href="javascript:;" > My Friend '+data[i][3]+'</a> </div>';
google.maps.event.addListener(marker , 'click', function(){ 
    infoBubble.setContent(this.html);
    infoBubble.open(map, this);
    var prova = this.info;
    var found = $(prova).attr('id');
    google.maps.event.addListenerOnce(infoBubble, 'domready', function ()   {           
     $(".testClass").click(function () {
     alert(found);        
    })      
}); 
});
    }
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:700px; height:500px"></div>
</body>
</html>

从这个SO问题和被接受的答案中可以看出您的问题与infobubble.js代码中的错误有关。

更具体地说，domready触发器的位置在代码的错误部分，在异步setMap()调用之前，而不是在之后的，在onAdd()函数(在setMap()函数之后调用)中将infobubble元素添加到DOM中。

这意味着在您的第一次标记点击，在domready事件，元素还没有被添加到DOM -但他们是几毫秒后-这就是为什么第二次标记点击工作。

我修复了domready在infobubble.js中的位置，并创建了一个已被接受的拉请求，现在合并到官方代码中。

如果你更新你的infobubble.js到最新的提交(使用非最小化的时刻)，你可能会看到你的问题已经解决了。

不工作的JS在这里使用旧代码。

相关内容

最新更新

热门标签：