마커 이벤트 Google지도를 클릭하십시오

점수가 마커로 업로드되는 Google지도가 있습니다. 점으로 경로 구성을해야합니다. 마우스 오른쪽 버튼으로 점을 클릭하면 점이 경로에 추가됩니다. 지도에서 객체 배열을 통해 마우스 클릭 이벤트의 핸들러를 만드는 방법을 이해하지 못했습니다. Yandex지도에서 다음과 같이 수행됩니다.마커 이벤트 Google지도를 클릭하십시오

myMap.geoObjects.events.add ('contextmenu', function (e) {})

Google지도는 어떨까요? 아이디어는 다음과 같아야합니다.

google.maps.Marker.addListener ('rightclick', function (e) {})

그러나이 방법은 작동하지 않습니다. 이벤트 처리는 어떻게 구현할 수 있습니까? enter image description here

출처

2017-10-16 Roman69

귀하의 포인트가 이미 배열되어 있다고 가정합니다. 그렇다면 배열의 각 지점을 반복하고 Google 마커의 새 인스턴스를 만들고 속성을 입력하면됩니다 (Google 마커 설명서의 경우 here)을 확인할 수 있습니다. 그런 다음 각 마커에서 '오른쪽 클릭'을 클릭하면 경로에 새 대상을 추가하는 수신기를 연결합니다. 이벤트에 대한 자세한 내용은 this 설명서를 확인하십시오.

<div id="map"></div> 
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script> 
<script type="text/javascript"> 
    function initMap(){ 
     var sampleCoords = [ { lat:14.599512, lng:120.98422 },{ lat:14.554729, lng:121.024445 },{ lat:14.579444, lng:121.035917 } ]; 
     var options = { center : { lat: 14.5995, lng:120.9842 }, zoom : 10, streetViewControl : false }; 
     var map = new google.maps.Map(document.getElementById('map'), options); 
     for (var key in sampleCoords) { 
      sampleCoords[key] = new google.maps.Marker({ 
       position : new google.maps.LatLng(sampleCoords[key].lat,sampleCoords[key].lng), 
       map : map, 
       title : 'test' 
      }); 
      sampleCoords[key].addListener('rightclick', function(params){ 
       alert('Right clicked!') 
      }); 
     } 
    } 
</script>

근무 데모 here

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Add Route to Map Onclick</title> 
 
     <style type="text/css"> 
 
      html,body,#map { 
 
       width:100%; 
 
       height:100%; 
 
      } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div id="map"></div> 
 
     <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCzjs-bUR6iIl8yGLr60p6-zbdFtRpuXTQ&callback=initMap"></script> 
 
     <script type="text/javascript"> 
 
      function initMap(){ 
 
       var sampleCoords = [ { lat:14.599512, lng:120.98422 },{ lat:14.554729, lng:121.024445 },{ lat:14.579444, lng:121.035917 } ]; 
 
       var options = { center : { lat: 14.5995, lng:120.9842 }, zoom : 10, streetViewControl : false }; 
 
       var map = new google.maps.Map(document.getElementById('map'), options); 
 
       for (var key in sampleCoords) { 
 
        sampleCoords[key] = new google.maps.Marker({ 
 
         position : new google.maps.LatLng(sampleCoords[key].lat,sampleCoords[key].lng), 
 
         map : map, 
 
         title : 'test' 
 
        }); 
 
        sampleCoords[key].addListener('rightclick', function(params){ 
 
         alert('Right clicked!'); 
 
        }); 
 
       } 
 
      } 
 
     </script> 
 
    </body> 
 
</html>

는 희망이 도움이 :

는 여기에 샘플 구현입니다!

출처

2017-10-19 08:51:18 rafon

정말 고마워요! – Roman69

도움이 되었으면 제 답변을 수락/반대 투표하십시오. 감사합니다 :) – rafon

글쎄, 다 됐어! 고마워요) – Roman69

마커 이벤트 Google지도를 클릭하십시오

답변

관련 문제