谷歌地圖api v3 infoBubble陣列不工作

我有一個使用infoBubble.js的地圖。谷歌地圖api v3 infoBubble陣列不工作

在此映射中，有一組我遍歷的位置數組。

當自定義圖標被點擊時，infoBubble應該彈出，但由於某種原因它只會打開第一個數據項。

有沒有人有一個想法，爲什麼會發生？

我在這裏開發了它的代碼;

var arrMarkers = [ 
    ['Santiago de Cuba', 20.040450354169483, -75.8331298828125], 
    ['Las Tunas', 20.97682772467435, -76.9482421875], 
    ['Camaguey', 21.39681937408218, -77.9205322265625], 
    ['Playa Santa Lucia', 21.555284406923192, -77.0526123046875], 
    ['Santa Clara', 22.421184710331854, -79.9639892578125], 
    ['Cienfuegos', 22.161970614367977, -80.4473876953125], 
    ['Havana', 23.12520549860231, -82.3919677734375], 
    ['San Cristobel', 22.730590425493833, -83.045654296875], 
    ['Pinar del Rio', 22.43641760076311, -83.69384765625] 
]; 

var arrInfoWindowsCuba = []; 

var arrInfoWindows = []; 
arrMarkers[i] = marker; 

function init() { 

    var mapCenter = new google.maps.LatLng(21.616579336740603, -78.892822265625); 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 7, 
     center: mapCenter, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
    var image = '/wp-content/themes/Shootcuba/images/map-icon.png'; 

    for (i = 0; i < arrMarkers.length; i++) { 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(arrMarkers[i][1], arrMarkers[i][2]), 
      icon: image 
     }); 


     var infoBubble = new InfoBubble({ 
      content: '<div class="phoneytext">' + arrMarkers[i][0] + '<div class="left-col2"></div></div>', 
      boxClass: 'info-box', 
      alignBottom: true, 
      pixelOffset: new google.maps.Size(-150, -40), 
      maxWidth: 300, 
      padding: 0, 
      closeBoxMargin: '0px', 
      borderColor: '#ffffff', 
      borderRadius: '0', 
      maxWidth: 535, 
      disableAutoPan: false, 
      hideCloseButton: false, 
      backgroundClassName: 'phoney' 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infoBubble.open(map, marker, i); 
      console.log(arrMarkers); 
     }); 

     arrMarkers[i] = marker; 
     arrInfoWindowsCuba[i] = infoBubble; 

    } 
}

來源

2012-11-19 M dunbavan

Here's a working example。我拿出了一些你所擁有的數組（我不完全確定它們是什麼，它們只是在你發佈的代碼片段中導致了錯誤），但是對於你正在做的事情來說，這是非常正確的。最大的區別是我爲創建標記創建了一個單獨的函數。這主要是爲了保持點擊事件的範圍彼此分離，因爲點擊事件總是觸發最後一個事件，這表明範圍沒有正確分離。

特別是，我認爲發生的事情是事件函數將標記和infoBubble的值覆蓋了值，事件偵聽器將引用這些變量的當前值，而不是第一次附加偵聽器時的值。進行單獨的函數調用以維護事件的範圍，這是最簡潔的解決方案。

來源

2012-11-19 21:42:02 Bubbles

BRILLIANT！是的，昨晚我又看了一遍，它很有效，但它一直跳回到第一個。我知道在編寫標記點擊事件和創建標記函數的作用域時，它只是一小段細節。感謝你的支持。這總是寫js的簡單方法真的有幫助。 –

谷歌地圖api v3 infoBubble陣列不工作

回答

相關問題