谷歌地圖Spiderfying標記和添加聽衆

我試圖蜘蛛我的標記和添加聽衆給他們。 Spidefying的工作正常，這意味着我得到的重疊標記spiderfied但問題是，我似乎無法計算如何添加監聽器到這些標記。換句話說，我嘗試了以下內容：谷歌地圖Spiderfying標記和添加聽衆

將oms.addListener()置於循環中。這樣，一旦點擊標記就會在同一個標記上打開所有infoWindow s，這並不令人愉快。
將oms.addListener()置於循環之外，就像OMS Git回購示例一樣。 https://github.com/jawj/OverlappingMarkerSpiderfier/blob/gh-pages/demo.html。這樣所有的標記都具有相同的infoWindow這是循環中的最後一個。

這是我的代碼：

var iw = new google.maps.InfoWindow(); 
var oms = new OverlappingMarkerSpiderfier(carte, {keepSpiderfied:true}); 
oms.addListener('click', function(marker){ 
    iw.setContent(content); 
    iw.open(carte, marker); 
}); 
var markers =[]; 
var bounds = new google.maps.LatLngBounds(); 
if (response.length != 0) { 
    for (var i = 0 ; i < response.length; i++) { 
     var loc = new google.maps.LatLng(response[i].latlong[0], response[i].latlong[1]); 
     bounds.extend(loc); 
     var lemarqueur = new google.maps.Marker({ 
      position: loc, 
      title: response[i].title 
     }); 
     content = '<table><tr><td><img src="' 
     +response[i].image+'"/></td><td><p style="font-size: 13px">' 
     +response[i].title+'</p> <p style="font-size: 10px"><b>Artists:</b> ' 
     +response[i].artist+'<br><b>Date:</b> '+response[i].startDate+'<br>' 
     +response[i].address.name +' '+response[i].address.street + '<br>' 
     +response[i].address.postalcode +', '+response[i].address.city +', ' 
     +response[i].address.country 
     +'<br><a target="_blank" href =' 
     +response[i].url+'>More info</a></p></td></tr></table>'; 

     oms.addMarker(lemarqueur); 
     markers.push(lemarqueur); 
    }; 
    carte.fitBounds(bounds); 
    var markerCluster = new MarkerClusterer(carte, markers); 
    markerCluster.setMaxZoom(15); 
    markerCluster.setGridSize(40); 
    google.maps.event.addDomListener(window, 'load', initialiser);

所以我想知道我應該把addListener()塊？

這是我已經在循環使用前，使用google.maps.event.addListener()，它工作得很好：

google.maps.event.addListener(lemarqueur, 'click', function() { 
    InfoWindow.open(carte, lemarqueur); 
});

我希望這個問題是清楚的是，在提前
感謝。

來源

2013-06-19 Hamed

這不是Spiderifier的問題，它是一個可以通過函數閉包（創建標記函數）很容易解決的問題。 http://stackoverflow.com/questions/4897316/google-maps-api-v3-infowindow-all-infowindows-displaying-same-content - http://stackoverflow.com/questions/3711700/all-infowindows-have-同樣的數據 – geocodezip

@geocodezip - 其實我的代碼有函數閉包，這意味着它像：'function createMarker（）; for（）{marker = createMarker;}'。但是爲了簡單起見，我在這裏貼了這個東西，因爲還有其他的東西在這裏被忽略。 – Hamed

@geocodezip - 如果您可以請提供一個Spiderfying示例，其中有一個函數閉包並循環了一些JSON數據。這將非常感激。 – Hamed

oms.addListener()的行爲與google.maps.event.addListener()的行爲不同。所以我不知何故通過在for循環內使用原始google.maps.event.addListener()而不是oms.addListener()來工作。像這樣：

var infoWindows = []; 

function closeInfoWindows(){ 
    var i = infoWindows.length; 
    while(i--){ 
     infoWindows[i].close(); 
    } 
} 

function newMarker(map, response, oms){ 
var loc = new google.maps.LatLng(response.latlong[0], response.latlong[1]); 
var marker = new google.maps.Marker({ 
    position: loc, 
    title: response.title 
}); 
oms.addMarker(marker); 
var WindowOptions = { content:'some desc...'};  
var InfoWindow = new google.maps.InfoWindow(WindowOptions); 
infoWindows.push(InfoWindow); 
google.maps.event.addListener(marker, 'click', function() { 
    closeInfoWindows(); 
    InfoWindow.open(carte, marker); // or this instead of marker 
}); 
return marker; 
} 


for (var i = 0 ; i < response.length; i++) { 
     markers.push(newMarker(map, response[i], oms)); 
    };

額外信用：geocodezip和 All infowindows have same data

工作示例可以在這裏（我的應用程序）發現：concert-dacote.com

來源

2013-06-20 00:26:00 Hamed

OMS處理程序在每次點擊時觸發每個單點標記的點擊事件......不確定我做錯了什麼，但是使用4k +標記它不會飛行。我甚至沒有想過嘗試恢復到香草點擊處理程序，因爲OMS文檔說你必須使用它們，但是...... whaddaya知道嗎？謝謝你的提示！ –

@AdrianGünter很高興能有所幫助。我有完全相同的問題。 – Hamed

這裏是另一種方法來增加聽衆的spiderfiered標記不適用於需要的環：

var oms = new OverlappingMarkerSpiderfier (...) ; 

// Create this function 
function addClickListenerToMarker(marker, onClickListener) { 
    oms.addListener('click', function (markerArg, eventArg) { 
     if (marker == markerArg) 
      onClickListener(marker, eventArg); 
    }); 
} 

// Add a click listener to your marker 
var myMarker = ... 
addClickListenerToMarker(myMarker, function (marker, event) { 
    alert('I have been clicked'); 
});

來源

2017-02-14 02:09:05 AnixPasBesoin

谷歌地圖Spiderfying標記和添加聽衆

回答

相關問題