谷歌地圖信息中的代碼泡泡不工作第一次

在infoBubble Google地圖裏面我添加了一個函數，但是第一次打開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>

來源

2015-09-09 Alberto

正如你可以看到this SO question和accepted answer 你的問題涉及到在infobubble.js代碼中的錯誤。

更具體地，domready觸發的放置是在代碼中，之前的asynchronouse setMap()呼叫的錯誤部分，代替後的infobubble元素添加到在onAdd()功能的DOM（這被稱爲功能setMap()之後）。

這意味着，關於你的第一個標誌點擊，在domready事件，這些元素還沒有被添加到DOM - 但他們是幾毫秒後 - 這就是爲什麼第二標記點擊工作。

我固定domready放置在infobubble.js和創建了已被接受，現在合併到官方代碼pull request。

如果您更新您的infobubble.jsto the latest commit（暫時使用非縮小），您可能會看到問題已解決。

Non-working JS Fiddle here使用舊的代碼。
Working JS Fiddle here使用新的代碼。

來源

2015-11-05 19:17:32 goredwards

谷歌地圖信息中的代碼泡泡不工作第一次

回答

相關問題