2012-02-28 9 views
2

구글 맵 마커를 클릭 할 때 뭔가를해야합니다. 임 시작점으로이 링크에서 데모를 사용하여 :Google지도 아이콘에 대한 자바 스크립트 클릭 이벤트?

http://gmap3.net/examples/tags.html

UPDATE - 필자는 다음과 같은 시도 :

 $.each(markers, function(i, marker){ 
      marker.setMap(checked ? map : null); 

      //added code begins 
      $(marker).click(function(){ 
       alert('dfd'); 
       }); 
      //added code ends 

     }); 
: 필자는 기존의 코드에이 중간 부분을 추가하는 시도

$.each(markers, function(i, marker){ 
    marker.click(function(){ 
    alert('alert'); 
    }); 
}); 

$.each(markers, function(i, marker){ 
    $(marker).click(function(){ 
    alert('alert'); 
    }); 
}); 

UPDATE를

답변

1

주 Google지도 레이어. Google API가 google.maps.addListener를 사용한다고 말하는 것이 맞습니다. 그러나 OP가 GMAP3 example using addMarkers에 더 가깝지만 클릭 이벤트를 수신하는 무언가를 원한다고 생각합니다. 이를 염두에두고 GMAP3에서 예제를 수정하고 mouseenter 이벤트를 click 이벤트로 변경하고 mouseleave 이벤트를 제거했습니다.

추가 재생을 원하는 사람들을 위해 jsFddle of this example을 만들었습니다.

여기 소스입니다 :

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <style> 
 
    #map { 
 
     width: 400px; 
 
     height: 400px; 
 
    } 
 
</style> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> 
 
<script type="text/javascript" src="http://gmap3.net/js/gmap3-4.1-min.js"></script> 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('#map').gmap3({ 
 
      action: 'init', 
 
      options: { 
 
       center: [46.578498, 2.457275], 
 
       zoom: 5 
 
      } 
 
     }, { 
 
      action: 'addMarkers', 
 
      markers: [ 
 
      { 
 
       lat: 48.8620722, 
 
       lng: 2.352047, 
 
       data: 'Paris !'}, 
 
       { 
 
        lat: 46.59433, 
 
        lng: 0.342236, 
 
        data: 'Poitiers : great city !'}, 
 
        { 
 
         lat: 42.704931, 
 
         lng: 2.894697, 
 
         data: 'Perpignan ! <br> GO USAP !'} 
 
         ], 
 
         marker: { 
 
          options: { 
 
           draggable: false 
 
          }, 
 
          events: { 
 
           click: function(marker, event, data) { 
 
            var map = $(this).gmap3('get'), 
 
            infowindow = $(this).gmap3({ 
 
             action: 'get', 
 
             name: 'infowindow' 
 
            }); 
 
            if (infowindow) { 
 
             infowindow.open(map, marker); 
 
             infowindow.setContent(data); 
 
            } else { 
 
             $(this).gmap3({ 
 
              action: 'addinfowindow', 
 
              anchor: marker, 
 
              options: { 
 
               content: data 
 
              } 
 
             }); 
 
            } 
 
           } 
 
          } 
 
         } 
 
        }); 
 
});​ 
 
</script> 
 
</head> 
 
<body> 
 
    <div id="map" style="width: 400x; height: 400px"></div>​ 
 
</body> 
 
</html>

+0

바이올린이 작동하지 않습니다. ( – Manwal

+0

바이올린이 더 이상 작동하지 않습니다. 변경된 사항을 확인해야하며, 새 GMAP3으로 업데이트해야 할 수도 있습니다. –

0

귀하의 질문에 많은 세부 사항이 포함되어 있지는 않지만 어쩌면 다음과 같은 것이 필요합니다.

,
$.each(markers, function(i, marker){ 
    marker.click(function(){ //maybe, its $(marker).click 
    console.log(marker); 
    }); 
}); 

편집 : 이것은 당신이 정확한 라인을 구글, 당신은 더 포인터를 얻을

google.maps.event.addListener(marker, 'click', toggleBounce); 

... 당신을 위해 일을 couls ... 행운을 빌어 요!

+0

나를 위해 일한 나도, 내 시도 내 질문을 업데이트 필자. 더 이상 세부 사항이 도움이 될지 알려주십시오. 감사합니다. – Evans

+0

다시 업데이트되었습니다. 나는 당신의 코드가 기존에 병합되어야한다고 생각하지 않았다. 결국 추가되지 않았다. – Evans

+2

google.maps.event.addListener (마커, '클릭', toggleBounce); 실제로 Google지도 api v3 객체에 청취자를 추가하는 방법입니다. – slawekwin

2
google.maps.event.addListener(marker, 'click', function() { 

}); 

심판 : https://code.google.com/apis/maps/documentation/javascript/events.html#UIEvents

예 : 영업 이익은 위에있는 API 레이어를 추가하는 jQuery 플러그인 라이브러리 인 GMAP3 라이브러리를 사용하여이 일에 대해 요구되는 http://jsfiddle.net/diode/yXQwp/

+0

초보자 질문이지만 내 질문에 링크 된 데모에서 이것을 추가 할 수 없습니다. – Evans

관련 문제