Marker Events Klicken Sie auf Google Maps

Es gibt eine Google Map, auf der Punkte als Marker hochgeladen werden. Es ist notwendig, die Route nach Punkten zu erstellen: Klicken Sie mit der rechten Maustaste auf den Punkt und der Punkt wird der Route hinzugefügt. Ich verstehe nicht, wie Sie den Handler von Mausklick-Ereignissen nach dem Array von Objekten auf der Karte erstellen. Auf den Yandex-Karten ist es so gemacht:Marker Events Klicken Sie auf Google Maps

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

Und was ist mit Google Maps? Die Idee sollte in etwa so aussehen:

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

Aber diese Methode funktioniert nicht. Wie kann ich die Ereignisbehandlung implementieren? enter image description here

Quelle

2017-10-16 Roman69

Ich nehme an, Ihre Punkte sind bereits in Array. Wenn dies der Fall ist, müssen Sie lediglich zu jedem Punkt in Ihrem Array iterieren und eine neue Instanz von Google Marker erstellen und die Eigenschaften (here für die Google Marker-Dokumentation) eingeben.. Fügen Sie dann in jedem Marker einen Listener an, der beim Klicken mit der rechten Maustaste ein neues Ziel auf Ihrer Route hinzufügt. Für weitere Informationen über Veranstaltungen, überprüfen Sie bitte this Dokumentation.

Hier ist eine Beispielimplementierung:

<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>

Arbeiten Demo 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>

Hoffe, es hilft!

Quelle

2017-10-19 08:51:18 rafon

Vielen Dank! – Roman69

Wenn es geholfen hat, denke bitte darüber nach, meine Antwort zu akzeptieren/upvoting. Danke :) – rafon

gut, fertig! Danke) – Roman69

Marker Events Klicken Sie auf Google Maps

Antwort

Verwandte Themen