0

私は、ユーザーがプロパティの周りを描画し、マーカーとポリラインを追加して、何が起こっているのかを明確に確認できるアプリケーションを開発しようとしています。ただし、マーカーをドラッグして（これは簡単です）、PolyLineの位置を更新する機能を追加したいと思います（これはそれほど簡単ではありませんか？）

これが私のコードの一部です

これは私のポリラインを描く関数です。

変数「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プロパティはです。https://developers.google.com/maps/documentation/javascript/reference#MVCArrayを参照してくださいPolylineMVCArray

したがって、最後のポイントを移動するには、次のことができるはずです。

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

さて、私はそれを理解しました。@Dave のメソッドを使用する

マーカーをドラッグすると polyLine を更新するコードは次のとおりです。

    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 に答える