Google지도 Spiderfying 마커 및 리스너 추가

Question

나는 마커를 Spiderfy하고 그들에 리스너를 추가하려고합니다. Spidefying이 잘 작동한다는 것은 중복 된 마커를 spiderfied한다는 의미지만이 마커에 리스너를 추가하는 방법을 생각할 수 없다는 것이 문제입니다. 다시 말해서 나는 다음을 시도했다.

• oms.addListener()을 반복한다. 이렇게하면 마커를 클릭하면 모두 infoWindow이 같은 표식으로 열리게되어 즐겁지 않습니다.
• oms.addListener()을 OMS Git repo의 예제와 같이 루프 외부에 둡니다. 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); 
}); 

나는 질문이 명확 충분히 사전에
감사 바랍니다.

Answer 1

oms.addListener()은 google.maps.event.addListener()과 같은 방식으로 작동하지 않습니다. 그래서 어떻게 든 원래 google.maps.event.addListener()oms.addListener() 대신 for 루프를 사용하여 작동하도록 만들었습니다. 그래서 같이 :

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

Answer 2

하기에 청취자를 추가하는 또 다른 방법입니다 귀하의 spiderfiered 마커 with 루프 필요 없음 아니오 :

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'); 
});