Question

我试图弄清楚如何获取已编辑的多边形的新坐标。首先，您在地图上绘制多边形，该多边形的坐标显示在textarea＆＃39; coordinaten＆＃39;中。坐标被处理为JSON STRING。＆lt; =这部分工作

在此步骤之后，使用＆＃39; editable＆＃39;如果是true，则可以对多边形进行整形/编辑。我希望新坐标显示在第二个textarea＆＃39; new_coordinaten＆＃39;中。一旦我开始工作，我会把它们放在同一个文本区域，但现在它还不错。

我是谷歌地图api（js）的新手，但是这个＆＃39; set_at＆＃39;和＆＃39; insert_at＆＃39;实际上工作？什么时候触发？如果你问我，谷歌地图api文档在这一部分并不清楚。

但是，如果我使用相同的代码来保存原始多边形的坐标，它应该可以正常工作吗？因为我试过这个但没有结果。

我的代码：

   <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>
        <div id="map" style="width:100%;height:400px;"></div><br>
        <textarea cols="100" rows="10" id="coordinaten"></textarea><br>
        <textarea cols="100" rows="10" id="new_coordinaten"></textarea>
    </body>

    <!-- GOOGLE API -->
    <script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=myMap">
    </script>
    <script>
        function initialize()
        {
            var mapOptions = {
                zoom: 10,
                center: new google.maps.LatLng(51.0108706, 3.7264613),
            };
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);

            var polygonOptions = {
                strokeColor: '#FF0000',
                strokeWeight: 2,
                strokeOpacity: 0.8,
                fillColor: '#FF0000',
                fillOpacity: 0.35,
                editable: true, //editeren van de polygon
                draggable: false //verplaatsen van de polygon
            };

            var polygon = new google.maps.Polygon(polygonOptions);

            polygon.setMap(map);

            google.maps.event.addListener(map, "click", function(event){
                var path = polygon.getPath();
                path.push(event.latLng);

                /*  --POLYGON-- */
                //converteren van de polygon naar JSON string
                //stap 1, coördinaten van polygon naar een array[]
                var coordinates_poly = polygon.getPath().getArray();
                var newCoordinates_poly = [];
                for (var i = 0; i < coordinates_poly.length; i++){
                    lat_poly = coordinates_poly[i].lat();
                    lng_poly = coordinates_poly[i].lng();

                    latlng_poly = [lat_poly, lng_poly];
                    newCoordinates_poly.push(latlng_poly);
                }

                //stap 2, converteren van array[] naar JSON
                var str_coordinates_poly = JSON.stringify(newCoordinates_poly);

                //stap 3, voeg de JSON string aan het textveld na druk van knop
                document.getElementById('coordinaten').value = str_coordinates_poly;
            });

            google.maps.event.addListener(polygon, 'set_at', function(){

                document.getElementById('new_coordinaten').value = "test - set_at";
            });

            google.maps.event.addListener(polygon, 'insert_at', function(){

                document.getElementById('new_coordinaten').value = "test - insert_at";
            });

        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    </html>

Answer 1

您需要在多边形路径上绑定您的侦听器，而不是多边形本身。

function initialize() {

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(40, 9),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    var polygon = new google.maps.Polygon({
        editable: true,
        strokeOpacity: 0,
        strokeWeight: 0,
        fillColor: '#00FF00',
        fillOpacity: .6,
        paths: [
        new google.maps.LatLng(39, 4),
        new google.maps.LatLng(34, 24),
        new google.maps.LatLng(43, 24),
        new google.maps.LatLng(39, 4)],
        map: map
    });

    // Get paths from polygon and set event listeners for each path separately
    polygon.getPaths().forEach(function (path, index) {

        google.maps.event.addListener(path, 'insert_at', function () {
            console.log('insert_at event');
        });

        google.maps.event.addListener(path, 'remove_at', function () {
            console.log('remove_at event');
        });

        google.maps.event.addListener(path, 'set_at', function () {
            console.log('set_at event');
        });
    });
}

#map-canvas {
  height: 200px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?callback=initialize"
        async defer></script>

Answer 2

也是我的新功能，我现在是如何工作的。

仅供参考：我现在没有使用删除或拖动选项，这就是我将两者都放在评论中的原因。

function initialize()
    {
        //fill array with coordinates   
        var path = [[51.14920179999362,3.706512451171875],[50.99042122689005,3.475799560546875],[50.93852713736125,3.73809814453125]];

        //Options for the map
        var mapOptions = {
            zoom: 10,
            center: new google.maps.LatLng(51.0108706, 3.7264613),
        }

        //generate map
        var map = new google.maps.Map(document.getElementById('map'), mapOptions);

        //translate array of arrays to LatLng
        var fixedPath = [];
        for (var i=0; i < path.length; i++){
            fixedPath.push({lat:path[i][0],lng:path[i][1]});
        }

        //options for the polygon
        var polyOptions = {
            paths: fixedPath,
            strokeColor: '#FF0000',
            strokeWeight: 2,
            strokeOpacity: 0.8,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            editable: true, //editeren van de polygon
            draggable: false //verplaatsen van de polygon
        };

        //create the polygon
        var polygon = new google.maps.Polygon(polyOptions);
        polygon.setMap(map);    

        //google.maps.event.addListener(polygon, "dragend", getPolygonCoords);
        google.maps.event.addListener(polygon.getPath(), "insert_at", getPolygonCoords);
        //google.maps.event.addListener(polygon.getPath(), "remove_at", getPolygonCoords);
        google.maps.event.addListener(polygon.getPath(), "set_at", getPolygonCoords);

        function getPolygonCoords() {
            var coordinates_poly = polygon.getPath().getArray();
            var newCoordinates_poly = [];
            for (var i = 0; i < coordinates_poly.length; i++){
                lat_poly = coordinates_poly[i].lat();
                lng_poly = coordinates_poly[i].lng();

                latlng_poly = [lat_poly, lng_poly];
                newCoordinates_poly.push(latlng_poly);
            }

            var str_coordinates_poly = JSON.stringify(newCoordinates_poly);

            document.getElementById('new_coordinaten').value = str_coordinates_poly;
        }
    }
    google.maps.event.addDomListener(window, 'load', initialize);

编辑原始多边形后获取新坐标

2 个答案: