javascript - Google Maps V3 拖动标记并更新折线

Question

我正在尝试开发一个应用程序，用户可以在属性周围绘图，它添加一个标记和一条折线，以便他们可以清楚地看到正在发生的情况。但我想添加拖动标记的功能(这很容易)并更新折线的位置(这不是那么容易？)

这是我的一些代码

这是绘制我的多边形线的函数。

变量'll'是google.maps.LatLng的实例

// Shorter namespace
    var _g = google.maps;

    // Shorten the namespace, it's used
    // a lot in this function
    var s = SunMaps;

    // If we've reached the max number
    // of lines then exit early.
    if (s.LINES >= 4) {
        return;
    }

    // The defaults
    var options = {
        "strokeColor"   : "green",
        "strokeOpacity" : 1.0,
        "strokeWeight"  : 4
    };

    // If we don't have an instance of poly
    // create one.
    if (s.POLY == false) {
        s.POLY = new _g.Polyline(options);
        s.PATH = s.POLY.getPath();
    }

    // Push the new coords into the path object
    s.PATH.push(ll);

    // Set the map for the poly
    s.POLY.setMap(s.instance);

    // Add a marker
    new s.Marker(ll);

    // Increase the counter
    s.LINES++;  

在同一点绘制标记(行代码中使用的 s.Marker 函数)

变量'll'是google.maps.LatLng的实例

var _g = google.maps;

    // Our custom marker
    var marker = new _g.Marker({
        "position" : ll,
        "icon"     : {
            "path" : _g.SymbolPath.CIRCLE,
            "scale": 10
        },
        "draggable": true,
        "map"      : SunMaps.instance,
        "LineIndex": SunMaps.LINES
    });

    _g.event.addListener(marker, 'drag', function (e) {
        console.log(marker.getPosition());
        // Here is where I can't workout or find documentation
        // on how to move the line.
    });

Answer 1

Polyline 对象的 path 属性是一个 MVCArray。请参阅https://developers.google.com/maps/documentation/javascript/reference#MVCArray

因此，要移动最后一点，您应该能够执行以下操作:

s.PATH.setAt(s.PATH.getLength() - 1, marker.getPosition());