web-dev-qa-db-ja.com

Googleマップv3-ポリゴンの頂点を削除

Googleマップには、ポリラインやポリゴンなどを描画する描画ライブラリがあります。

この機能の例： http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

ポリゴンを描画および編集するときに、パス上の1つのポイント/頂点を削除できるようにしたいのですが。 APIドキュメントは何も示唆していないようです。

javascriptgoogle-mapsdrawingpolygon
27
James F

これは現在、未解決の機能リクエストです（Googleが承認） issue 376 。

これが私の解決策です： http://jsbin.com/ajimur/1 。渡されたポリゴン（[元に戻す]ボタンの下）に削除ボタンを追加する関数を使用します。

または、誰かがこのアプローチを提案しました： 右クリックして最も近い頂点を削除 。リンクからのコードに基づいて、クリックがノードの内部（または1ピクセル以内）であるかどうかを確認しました-JSBinの http://jsbin.com/ajimur/ です。

編集： Amr Bekhit が指摘-イベントはポリゴンにアタッチする必要があるため、このアプローチは現在壊れています。

26
Ian Grainger

Googleマップでは、ポリゴンまたはポリラインからトリガーされたイベントに対して " PolyMouseEvent "コールバックオブジェクトを提供するようになりました。

右クリックを含むソリューションを提案した他の回答に基づいて作成する必要があるのは、V3 APIの最新バージョンで次のことだけです。

// this assumes `my_poly` is an normal google.maps.Polygon or Polyline
var deleteNode = function(mev) {
  if (mev.vertex != null) {
    my_poly.getPath().removeAt(mev.vertex);
  }
}
google.maps.event.addListener(my_poly, 'rightclick', deleteNode);

Google Maps APIがクリックした頂点を通知するようになったため、ポイントに近いかどうかに関する複雑な計算は必要なくなりました。

注：これは、ポリライン/ポリゴンが編集モードの場合にのみ機能します。（削除する可能性のある頂点が表示される場合です。）

最後に、クリックイベントまたはダブルクリックイベントの代わりに使用することを検討できます。 「クリック」は、ドラッグでトリガーしないほどスマートですが、シングルクリックトリガーを使用しても、一部のユーザーを驚かせる可能性があります。

35
Sean Ouimet

Seanのコードは非常にシンプルで役に立ちました。ユーザーがノードを3つだけ残したときに削除を停止するリミッターを追加しました。これがないと、ユーザーは1つのノードに移動して、編集できなくなります。

my_poly.addListener('rightclick', function(mev){
    if (mev.vertex != null && this.getPath().getLength() > 3) {
        this.getPath().removeAt(mev.vertex);
    }
});
16
Evil Red Robot

複数のパスを含むポリゴンからノードを削除する必要がある状況に遭遇しました。ショーンとイービルのコードの修正は次のとおりです。

shape.addListener('rightclick', function(event){
  if(event.path != null && event.vertex != null){
    var path = this.getPaths().getAt(event.path);
    if(path.getLength() > 3){
      path.removeAt(event.vertex);
    }
  }
});
8
user879121

私もこれの解決策を探していたので私が貢献したいと思っただけで、これが私の実装です：

if (m_event.hasOwnProperty('Edge') && m_event.Edge >= 0 &&
GeofenceService.polygon.getPath().getLength() > 3) {
    GeofenceService.polygon.getPath().removeAt(m_event.Edge);
    return;
}

if (m_event.hasOwnProperty('vertex') && m_event.vertex >= 0 &&
GeofenceService.polygon.getPath().getLength() > 3) {
    GeofenceService.polygon.getPath().removeAt(m_event.vertex);
    return;
}

これにより、頂点ノードとエッジノードの削除の処理が可能になり、パス長> 3をチェックすることにより、常に最小の三角形形成ポリゴンが維持されます。

2
andro1d