标记事件点击 Google 地图

Question

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

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

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

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

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

Answer 1

我假设你的点已经在数组中了。如果是这样，您需要做的就是遍历数组中的每个点并创建一个新的 Google 标记实例并填写属性（您可以检查 here for Google Marker documentation). Then in each Marker, attach a listener that when 'rightclick' is clicked, it will add a new destination on your route. For more info about events, please check 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>

希望对您有所帮助！

标记事件点击 Google 地图

Markers Events Click Google Maps

google-maps

google-maps-api-3

google-maps-markers