如何在可拖动的多边形上获得 lat long？ [复制]

Question

我想在拖动或编辑多边形时获取纬度和经度。我如何将事件侦听器应用于此多边形，以便每当我编辑或拖动多边形时，它应该在我在多边形上编辑的每个点的控制台上显示纬度。

function initialize() {
    var map = new google.maps.Map(document.getElementById("map"), {
        zoom: 15,
        center: {lat: 51.476706, lng: 0},
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    // create an array of coordinates for a pentagonal polygon
    var arrCoords = [
        new google.maps.LatLng(51.474821, -0.001935),
        new google.maps.LatLng(51.474647, 0.003966),
        new google.maps.LatLng(51.477708, 0.004073),
        new google.maps.LatLng(51.479753, 0.000468),
        new google.maps.LatLng(51.477654, -0.002192)
    ];

    var polygon = new google.maps.Polygon({
        editable: true,
        paths: arrCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35,
        map: map
    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

首先在多边形中用draggable: true制作geodesic: true

在多边形或折线上启用拖动时，您还应该 考虑使多边形或折线测地线，通过设置其 geodesic 属性到true

参考：https://developers.google.com/maps/documentation/javascript/shapes

insert_at & set_at 将在 polyline 得到 edited 时被调用。

var polygon = new google.maps.Polygon({
    editable: true,
    paths: arrCoords,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    map: map,
    draggable: true,
    geodesic: true        
});

google.maps.event.addListener(polygon, 'dragend', function(evt){        
    console.log(evt.latLng.lat() ,'--',  evt.latLng.lng() );
});

google.maps.event.addListener(polygon.getPath(), 'insert_at', function(index, obj) {
     console.log('Vertex removed from inner path.');
     console.log(obj.lat() ,'--',  obj.lng() );
});

google.maps.event.addListener(polygon.getPath(), 'set_at', function(index, obj) {
     console.log('Vertex moved on outer path.');
     console.log(obj.lat() ,'--',  obj.lng() );
});