0

このコードはv2にあります:

var polyline = new GPolyline([point1,point2], "#ff0000", 5);
map.addOverlay(polyline);
polyline.enableDrawing();

そしてv3で行う方法??

ありがとう

4

3 に答える 3

1

Maps API v3.7 以降、この機能がついにサポートされました!!

http://code.google.com/p/gmaps-api-issues/wiki/JavascriptMapsAPIv3Changelog

于 2011-11-15T08:01:11.053 に答える
0

残念ながら、enableDrawing/enableEditingはv3ではサポートされていません。バグトラッカーに機能リクエストがあります。

自分で実装することは可能ですが（たとえば、このデモを参照）、v2と同様に実装するのは簡単ではありません。

私は現在、この問題の解決策を自分で探しています。これまでのところ、少なくとも少し有望に見える実装は1つだけです。Polyline-enableEditing-enableDrawing-for-GMaps-API-v3です。

于 2010-06-21T08:31:45.327 に答える
0

実装するのは大変でしたが、可能です。状態パターンを使用して、デジタル化プロセスを追跡しました。私は EXT JS を使用したので、厳密に JavaScript のものを含めようとしています。ボタンをクリックすると、デジタル化オブジェクトは、デジタル化中か、デジタル化していないか、または編集中かを追跡します。状態は、POINT、POLYLINE、POLYGON のどのジオメトリ タイプを処理する必要があるかも追跡します。状態を設定するためのボタンが利用可能でした。マップのクリックを次のようにキャプチャします。

google.maps.event.addListener(map,"click",digitizer.onDigitize.createDelegate(digitizer));
google.maps.event.addListener(map,"dblclick",digitizer.endDigitize.createDelegate(digitizer));

デジタイザー オブジェクト内で、デジタイズ ポリゴンとポイントを追跡しました。ユーザーがクリックするたびに、イベント内の latLng を追跡対象のオブジェクトに送信します。

this.digitizedGeometry.getPath().push(e.latLng);

これは、ポリラインとポリゴンの両方で機能します。このためにドーナツや複数のジオメトリではなく、単純なトポロジのみを追跡しました。

ポイントの編集と削除はより困難でした。

最初に、ユーザーが選択したジオメトリが POLYLINE か POLYGON かを追跡し、このジオメトリをデジタイザー内の editGeometry 変数に配置し、編集用のボタンを有効にする必要がありました。

編集ジオメトリのパスを循環し、さまざまなスタイルのマーカーと中間点マーカーを追加して、マーカーがドラッグ可能であることを確認しました。

var path = this.editGeometry.getPath();
for (var i = 0; i < path.getLength(); i++) {
    // Add point geometry markers
    var point = path.getAt(i);
    var latLng = new google.maps.LatLng(point.lat(), point.lng());
    var markerOptions = {position: latLng, map: mapPanel.getMap()};
    Ext.apply(markerOptions, digitizer.markerStyle);
    var marker = new google.maps.Marker(markerOptions);

    // Used to track the latLng associated with the marker when position changes.
    marker.edit = {
        path: path,
        position: i,
        isMidpoint: false
    };
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true));
    google.maps.event.addListener(marker, "rightclick", digitizer.onContextMenu.createDelegate(mapPanel, marker, true));
    digitizer.editHandles.push(marker);

    // determine the midpoint
    var nextValue = (i+1) % path.getLength();
    var otherPoint = path.getAt(nextValue);

    var latLng = new google.maps.LatLng((point.lat() + otherPoint.lat()) / 2.0, (point.lng() + otherPoint.lng()) / 2.0);
    var markerOptions = {position: latLng, map: mapPanel.getMap()};
    Ext.apply(markerOptions, digitizer.midpointMarkerStyle);
    var marker = new google.maps.Marker(markerOptions);

    marker.edit = {
        path: path,
        position: i,
        isMidpoint: true
    };
    google.maps.event.addListener(marker, "dragend", digitizer.applyMarkerEdit.createDelegate(mapPanel, marker, true));
    digitizer.editHandles.push(marker);   
}

キー部分は「dragend」で、編集を適用します。それがパス内の実際のポイントである場合は、ポイントを移動して中間点を再決定します。

marker.edit.path.setAt(marker.edit.position, e.latLng);

// Adjust midpoints
var index = handles.indexOf(marker);
var prev = (index - 2 + handles.length) % handles.length;
var mpprev = (index - 1 + handles.length) % handles.length;
var next = (index + 2) % handles.length;
var mpnext = (index + 1) % handles.length;
var prevMarker = handles[prev];
var nextMarker = handles[next];
var prevMpMarker = handles[mpprev];
var nextMpMarker = handles[mpnext];
prevMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + prevMarker.getPosition().lat()) / 2.0, (e.latLng.lng() + prevMarker.getPosition().lng()) / 2.0));
nextMpMarker.setPosition(new google.maps.LatLng((e.latLng.lat() + nextMarker.getPosition().lat()) / 2.0, (e.latLng.lng() + nextMarker.getPosition()

これは非常に複雑であることがわかります。中間点が必要ない場合は、上記のコードの最初の行で十分です。中間点の適用はより複雑です。中点をパスに追加し、すべての位置をシフトし、新しい中点を追加して前の中点を調整する必要があります。ポイントを削除したい場合は、そのポイントを削除し、ハンドルの位置を減らし、中点を削除して、前の中点を再調整する必要があります。

うまくいけば、これにより、これを行う方法についての洞察が得られます。残念ながら、2 行のコードではなく 200 行のコードですが、マーカー スタイルの設定など、好きなことを柔軟に行うことができます。

于 2010-07-26T03:07:13.160 に答える