javascript - 如何获取谷歌地图apiv3中新编辑的多边形坐标

标签 javascript jquery html google-maps-api-3

我已经成功创建和编辑了多边形,绘制多边形后我得到了多边形的坐标,我正在寻找的是编辑多边形后我没有得到多边形的新坐标(拖动结束后我是获取坐标后,新坐标应该立即出现,就像我绘制多边形时发生的那样)。

我的java脚本:

var map;
    var coords = [];
    var lats = [];
    var lngs = [];
    var myMarkers = [];
    var myPoly;
    function initialize() {
        var latlng = new google.maps.LatLng(17.397821, 78.479354);
        var mapOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        addEventListener_marker();

    }
    function addEventListener_marker() {
        google.maps.event.addListener(map, 'click', function (e) {
            coords.push(e.latLng);
            lats.push(e.latLng.lb);
            lngs.push(e.latLng.mb);
            placeMarker(e.latLng, map);
        });
    }

    function placeMarker(position, map) {
        var mark = new google.maps.Marker({
            position: position,
            map: map,
            draggable: false
        });
        myMarkers.push(mark);
    }

    function createPoly() {
        polyOptions = {
            path: coords,
            strokeColor: "#FF0000",
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: "#FF6803",
            fillOpacity: '0.25',
            draggable: true,
            editable: true
        }
        myPoly = new google.maps.Polygon(polyOptions);
        myPoly.setMap(map);
        google.maps.event.addListener(myPoly, 'click', isWithinPoly);
        markerCoords();
        //removeEventListener();
        clearOverlays();

    }

    function markerCoords() {
        var curLatLng = [];
        curLatLng = myPoly.getPath().getArray();
        $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        //google.maps.event.addListener(myPoly, 'shape_changed', function () {
        google.maps.event.addListener(myPoly, 'dragend', function () {
            //alert("drag end");
            var curLatLng;
            curLatLng = myPoly.getPath().getArray();
            $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        });

        google.maps.event.addListener(myPoly, 'set_at', function () {
            //alert("drag end");
            var curLatLng1;
            curLatLng1 = myPoly.getPath().getArray();
            $("#info").append("coordinates are: Latitude: " + curLatLng1 + "<br/>");
        });

        google.maps.event.addListener(myPoly, 'insert_at', function () {
            //alert("drag end");
            var curLatLng2;
            curLatLng2 = myPoly.getPath().getLength();
            $("#info").append("coordinates are: Latitude: " + curLatLng2 + "<br/>");
        });

    }

    function removeEventListener() {
        //google.maps.event.clearListeners(map, 'bounds_changed');
    }
    function clearOverlays() {
        setAllMap(null);
    }
    function setAllMap(map) {
        for (var i = 0; i < myMarkers.length; i++) {
            myMarkers[i].setMap(map);
        }
    }
    function isWithinPoly(event) {
        var isWithinPolygon = google.maps.geometry.poly.containsLocation(event.latLng, this);
    }

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

html 是:

<div id="map-canvas"></div>
<p id="info"></p>

<input type="button" onclick="createPoly();" value="draw polygon" />
<小时/>

编辑:

我正在使用 set_at 和其他两个类似的事件,但这三个事件都没有被触发。

function markerCoords() {
        var curLatLng = [];
        curLatLng = myPoly.getPath().getArray();
        $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        //google.maps.event.addListener(myPoly, 'shape_changed', function () {
        google.maps.event.addListener(myPoly, 'dragend', function () {
            alert("drag end");
            var curLatLng;
            curLatLng = myPoly.getPath().getArray();
            $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        });

        google.maps.event.addListener(myPoly, 'set_at', function () {
            alert("set_at");
            var curLatLng;
            curLatLng = myPoly.getPath().getArray();
            $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        });

        google.maps.event.addListener(myPoly, 'insert_at', function () {
            alert("insert_at");
            var curLatLng;
            curLatLng = myPoly.getPath().getArray();
            $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        });

        google.maps.event.addListener(myPoly, 'remove_at', function () {
            alert("remove_at");
            var curLatLng;
            curLatLng = myPoly.getPath().getArray();
            $("#info").append("coordinates are: Latitude: " + curLatLng + "<br/>");
        });
    }

最佳答案

观察多边形路径的事件set_atinsert_atremove_at:

    google.maps.event.addListener(myPoly.getPath(), 'set_at',   markerCoords);
    google.maps.event.addListener(myPoly.getPath(), 'insert_at',markerCoords);
    google.maps.event.addListener(myPoly.getPath(), 'remove_at',markerCoords);

关于javascript - 如何获取谷歌地图apiv3中新编辑的多边形坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20242809/

相关文章:

javascript - 悬停时如何使文本出现在图像顶部?

javascript - 仅包含以数字开头的行

javascript - 无法使用 $.each() 迭代器函数从数组中获取当前值

javascript - 尝试将值从 JS 发送到 PHP - JQuery 的 $.ajax() 方法不起作用

javascript - mongoDB 中的分组依据

javascript - JavaScript 中的除法编码

javascript - CSS/less 文件未加载

javascript - 附加到预先输入

javascript - 使用 jQuery 根据属性值将元素移动到正确的顺序

javascript - CSS Typed OM——解析背景颜色?