Google지도 표시 자 데이터

Question

Google지도에 표시 할 위도/경도 목록을 얻기 위해 현재 서버에 아약스 전화를 걸고 있습니다. 각 마커에 '클릭'이벤트도 첨부했습니다. 트릭은 마커에 약간의 여분의 데이터를 저장할 필요가있어서 데이터베이스에서 어떤 ID를 사용했는지 알기에 나중에 데이터베이스에 다시 매치합니다. Title 속성을 사용하여 친숙한 정보를 표시하고 있습니다. AJAX, 마커 생성 및 클릭 이벤트는 정상적으로 작동합니다. 마커에 대한 추가 데이터를 저장하는 올바른 방법은 무엇입니까? 여기에 코드를 참조하십시오 :

$.ajax({ 
    url: "/location/NearbyHotspots", 
    data: { 
     lat: marker.position.lat(), 
     lng: marker.position.lng(), 
     radius: 10 
    }, 
    datatype: "json", 
    type: "POST", 
    success: function (data, status, xhttp) { 
     for (var i = 0; i < data.length; i++) { 
      var loc = new google.maps.LatLng(data[i].Lat, data[i].Long); 
      var newmarker = new google.maps.Marker({ 
       position: loc, 
       draggable: false, 
       map: map, 
       title: data[i].Name 
      }); 

      // This doesn't seem to work 
      newmarker.hotspotid = data[i].ID; 
      google.maps.event.addListener(newmarker, "click", function(mark) { 
       alert(mark.hotspotid); 
      }); 
     } 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
     alert(textStatus); 
    } 
}); 

Answer 1

HA! 나는 그것을 알아. "이것"은 그것을했다!

google.maps.event.addListener(newmarker, "click", function(mark) { 
    alert(this.hotspotid); 
}); 

Answer 2

나는 당신의 접근 방식이 옳다고 생각합니다. 그것은 잘못된 이벤트 처리기 일뿐입니다. 핸들러

function(mark) { 
    alert(mark.hotspotid); 
} 

의 mark 인수는 예상대로, 마커 아니지만, MouseEvent (see the API reference for details).

이 문제를 해결하려면 클로저를 사용하여 마커에 대한 참조를 전달해야합니다. 이것은 루프에 의해 복잡합니다 - 단지 루프의 마지막 마커를 참조하기 때문에 newmarker에 대한 참조를 사용할 수 없습니다. 이이 문제를 해결하는 방법에는 여러 가지가 있지만 가장 쉬운 방법은 별도의 함수에서 클릭 이벤트를 부착하는 것입니다

success: function (data, status, xhttp) { 
    // define a function to attach the click event 
    function attachClickEvent(marker) { 
     google.maps.event.addListener(marker, "click", function() { 
      // the reference to the marker will be saved in the closure 
      alert(marker.hotspotid); 
     }); 
    } 
    for (var i = 0; i < data.length; i++) { 
     var loc = new google.maps.LatLng(data[i].Lat, data[i].Long); 
     var newmarker = new google.maps.Marker({ 
      position: loc, 
      draggable: false, 
      map: map, 
      title: data[i].Name 
     }); 

     newmarker.hotspotid = data[i].ID; 
     attachClickEvent(newmarker); 
    } 
},