从用户创建的 google 地图折线中删除节点

Question

我需要允许用户在 google 地图上创建折线，并允许他们删除他们创建的折线之间的节点。删除的结果应该是一条连接两个新相邻节点的新折线。目前我正在努力允许用户删除节点。我研究了一下，发现 a google reference and this SO question。不幸的是，他们都假设我在某处有对多段线的引用，但我没有，因为多段线是由用户动态创建的。

这是我目前使用的代码：

function initialize() {
    var mapOptions = {
        center: { lat: 45.797436, lng: 24.152044 },
        zoom: 12
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

    var drawingManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            position: google.maps.ControlPosition.TOP_CENTER,
            drawingModes: [
                google.maps.drawing.OverlayType.MARKER,
                google.maps.drawing.OverlayType.POLYLINE
            ]
        },
        markerOptions: {
            icon: '/Mvc/Content/Styles/dropDownArrow.png'
        },
        polylineOptions: {
            editable: true,
        }
    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'markercomplete', markerCompleted);
    google.maps.event.addListener(drawingManager, 'polylinecomplete', polylineCompleted);

    function markerCompleted(marker) {
        var coordinates = { lng: marker.getPosition().lng(), lat: marker.getPosition().lat() };
        alert('The coordinates for the new marker are: lat:' + coordinates.lat + ', long: ' + coordinates.lng);
    }

    function polylineCompleted(polyline) {

    }
}

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

我尝试的是将 polylineCompleted 事件处理程序中的 polyline 参数映射到全局变量，然后使用在 SO link 中找到的解决方案以某种方式更新折线，然后使用 DrawingManager class 的 getMap() 和 setMap() 函数更新地图，但我卡住了。有什么方法可以让用户删除折线节点，而无需引用折线对象？

Answer 1

不确定这是否是您要实现的目标，但这里有一个示例，说明如何让用户在不使用 drawingManager 的情况下从多段线添加和删除节点。

var map, polyline, markers = new Array();

function initialize() {

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(20.291, 153.027),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    polyline = new google.maps.Polyline({
        strokeColor: 'red',
        strokeWeight: 1,
        map: map
    });

    google.maps.event.addListener(map, 'click', function (event) {

        addPoint(event.latLng);
    });
}

function removePoint(marker) {

    for (var i = 0; i < markers.length; i++) {

        if (markers[i] === marker) {

            markers[i].setMap(null);
            markers.splice(i, 1);

            polyline.getPath().removeAt(i);
        }
    }
}

function addPoint(latlng) {

    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    markers.push(marker);

    polyline.getPath().setAt(markers.length - 1, latlng);

    google.maps.event.addListener(marker, 'click', function (event) {

        removePoint(marker);
    });
}

initialize();

JSFiddle demo

点击地图添加点，点击标记删除点。

从用户创建的 google 地图折线中删除节点

delete node from a user created google maps polyline

javascript

google-maps

polyline

google-maps-api-3