标记事件点击谷歌地图

有一个谷歌地图上点作为标记上传。有必要通过点进行路线建设：用鼠标右键单击该点，并将该点添加到路线中。我不明白如何通过地图上的对象数组来制作鼠标单击事件的处理程序。在Yandex Maps上，它是这样做的：标记事件点击谷歌地图

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

那么Google地图呢？这个想法应该是这样的：

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

但这种方法是行不通的。我如何实现事件处理？ enter image description here

来源

2017-10-16 Roman69

我假设你的观点已经在数组中。如果是这样，您只需循环访问阵列中的每个点，然后创建一个新的Google Marker实例并填写属性（，您可以查看here对于Google标记文档）。然后在每个标记中，附加一个侦听器，当单击“右键单击”时，它将在您的路线上添加新的目标。有关事件的更多信息，请查看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

标记事件点击谷歌地图

回答

相关问题