1

地図上に図形を描画し、編集可能で選択できるアプリを作成しました。

これは、「overlaycomplete」リスナーを Drawing Manager に追加し、選択した形状を設定したり、選択をクリアしたり、形状を削除したりするための関数を記述することで実現されました。

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {

        drawingManager.setDrawingMode(null);

        var shape = e.overlay;
        shape.type = e.type;

        google.maps.event.addListener(shape, 'click', function() {
            select(shape);
          });

その後、すべての形状の詳細をデータベースに保存できます。ここで、再び編集できるようにする必要がある同じ形状でマップを再作成する必要があります。データベースから詳細を読み込んだ後、シェイプを再作成しましたが、以前に使用したのと同じ機能を使用するためにリスナーを設定できないようです。形状は、次のように指定することで単純に再描画されます。

shape = new google.maps.Polygon({
                map: map,
                paths: paths,
                zIndex: 90,
                strokeWeight: 0,
                fillColor: color,
                fillOpacity: 0.65,
                editable: true
              });

このように図形を描画した後、それらは編集可能ですが、たとえば削除するために一度に 1 つの図形を選択することはできません。すなわち。形状は、以前に記述された関数では操作できません。

リスナーを設定する方法はありますか?

4

1 に答える 1

0

問題の解決策を見つけました。保存した形状はループによって描画されており、ループの実行中にインクリメントされる変数名が常にあります。したがって、ループの実行中に、各シェイプにマップ リスナーを設定します。

varString = "shape"+i;

    //Output shape
    window[varString] = new google.maps.Polygon({
                map: map,
                paths: paths,
                zIndex: 90,
                strokeWeight: 0,
                fillColor: color,
                fillOpacity: 0.65,
                myIndex: i,
                editable: true
              });

    google.maps.event.addListener(window[varString],"mouseout",function(){
                 path = this.getPath();
                 area = google.maps.geometry.spherical.computeArea(path);
                                     alert("area");
                });

これで、各シェイプに同じ機能を設定でき、ユーザーは以前と同じようにそれらを編集できます。主な違いは、「選択」機能が使用できなくなり、すべてのシェイプが常に「選択」されているように見えることです (ドラッグ可能なコーナー上のポイントは、常にすべての形状で表示されます)。

于 2012-10-11T11:06:30.430 に答える