0

我正在尝试开发一个应用程序，用户可以在其中绘制一个属性，它添加一个标记和一条折线，这样他们就可以清楚地看到正在发生的事情。但我想添加拖动标记的能力（这很容易）并更新折线的位置（这不是那么容易吗？）

这是我的一些代码

这是绘制我的折线的函数。

变量'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.
    });
4

2 回答 2

2

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

因此，要移动最后一点，您应该能够做到：

s.PATH.setAt(s.PATH.getLength() - 1, marker.getPosition());
于 2013-03-11T00:31:59.793 回答
1

好的，所以我想通了。使用@Dave 的方法

这是在拖动标记时更新折线的代码

    var _g = google.maps;
    var _s = SunMaps;

    // Our custom marker
    var marker = new _g.Marker({
        "position" : ll,
        "icon"     : {
            "path" : _g.SymbolPath.CIRCLE,
            "scale": 7
        },
        "draggable": true,
        "map"      : _s.instance,
        // This is the last known index of a polyLine
        "lineIndex": _s.LINES
    });

    // Listen to the drag event
    _g.event.addListener(marker, 'drag', function (e) {
        // Set the new position of the marker as it drags
        this.setPosition(e.latLng);

        // Update the path
        _s.PATH.setAt(this.lineIndex, this.getPosition());
    });
于 2013-03-14T20:46:52.853 回答