javascript - 从用户创建的谷歌地图折线中删除节点

Question

我需要允许用户在谷歌地图上创建折线，还允许他们删除他们创建的折线之间的节点。删除的结果应该是一条连接两个新相邻节点的新折线。目前我正在努力允许用户删除节点。我研究了一下，发现 a google reference和 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 链接中找到的解决方案以某种方式更新折线，然后使用 DrawingManager 类的 getMap() 和 setMap() 函数更新 map ，但我卡着了。有什么方法可以让用户删除折线节点，而无需引用折线对象？

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

在 map 上单击以添加点，单击标记以删除点。