标记事件点击谷歌地图答案

【问题标题】：Markers Events Click Google Maps标记事件点击谷歌地图
【发布时间】：2017-10-16 14:38:17
【问题描述】：

有一个谷歌地图，其中点作为标记上传。需要通过点来进行路径构建：鼠标右键单击点，点被添加到路径中。我不明白如何通过地图上的对象数组来处理鼠标点击事件。在 Yandex 地图上，它是这样完成的：

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

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

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

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

【问题讨论】：

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

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

希望对你有帮助！

【讨论】：

非常感谢！
如果有帮助，请考虑接受/支持我的回答。谢谢:)