2

わかりました、ここに私の問題があります。簡単に説明するために写真を載せます。 Google マップの編集可能な六角形

カバレッジ エリアを表すポリゴンをユーザーに描画してもらう必要があります。

後で処理アルゴリズムに入るため、ポリゴンには固定数のポイント (頂点) が必要であり、ポリゴンに多くのポイントが含まれる場合は非常に遅くなります。

とにかく、私の例では六角形 (6 ポイント) に固執しましょう。
ユーザーはポリゴンをドラッグして変更できる必要がありますが、ポイントの数は変更できません。

editable: trueポリゴンのオプションを設定してみましたが、正常に動作しますが、写真に示されている状況になります。すべてのポイントにハンドルを作成し、各ポイントの中間に別のハンドル (半透明) を作成します。ここで、ユーザーがその半透明の点を移動すると、ポリゴンに別の点 (頂点) が追加され、新しく作成された線の中央に 2 つのハンドルが追加されます。これにより、7 ポイントのポリゴンが得られます。

最良のオプションは、これらの半透明のハンドルを削除することです。これにより、ユーザーはポリゴン ポイントのみをドラッグでき、ポイントの総数に影響を与えることができなくなります。

Googleマップの編集可能なオプションを使用してこれを達成できますか?

4

4 に答える 4

8

目的を達成する別の方法は、ポリゴンの組み込みの編集機能を放棄して、自分で実装することです。これはより強力で柔軟です。

まず、ポリゴンを編集可能にしないでください。次に、ポリゴンの各コーナーにマーカーを作成します。最後に、各マーカーをドラッグ可能にし、その「ドラッグ」イベントのイベント リスナーでポリゴンを更新します。

マーカーを作成し、イベント リスナーを追加します。

for (var i=0; i<coordinates.length; i++){
    marker_options.position = coordinates[i];
    var point = new google.maps.Marker(marker_options);

    google.maps.event.addListener(point, "drag", update_polygon_closure(polygon, i));
}

update_polygon_closure は次のように定義されます。

function update_polygon_closure(polygon, i){
    return function(event){
       polygon.getPath().setAt(i, event.latLng); 
    }
}

完全なコードは jsfiddle にあります: https://jsfiddle.net/3L140cg3/16/

于 2015-06-27T22:04:23.563 に答える
5

誰もより良い解決策を持っていないようなので、誰かが同じ問題に出くわした場合に備えて、私の回避策を承認済みとしてマークします。あまりきれいではありませんが、仕事を成し遂げます

これまでに見つけた唯一の解決策は、ポリゴンが描画された後にハンドルを手動で非表示にすることです。ここでの問題は、ハンドルに CSS クラスまたは ID がないため、すべての div を不透明度 0.5 (ハンドルの不透明度) で非表示にする必要があることです。それは機能しますが、他の何かが同じ不透明度を持ち、非表示にする必要がないことを考えると、かなり危険です.

// variables
var map, path, color;

polygon = new google.maps.Polygon({
    paths: path,
    strokeColor: color,
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: color,
    fillOpacity: 0.10,
    editable: true,
});
polygon.setMap(map);
setTimeout(function(){ map.find('div[style*=opacity: 0.5]').hide(); }, 50);
于 2012-04-08T21:59:00.023 に答える
2

@zolaktの答えを少し改善するために、ポリゴンの中間点divを非表示にし、マウスダウンイベントリスナーを追加して、中間点がクリックされたときに追跡して、ポリゴンのドラッグと変更を防ぐことができます。

// hide the midpoints (note that users can still click where the hidden midpoint
// divs are and drag to edit the polygon
$('#multi_markers div[style*="opacity: 0.5"]').hide();

// get the paths for the current polygon
var octopusPaths = HotelLib.octopusPolygon.getPaths();


// track when a polygon midpoint is clicked on
google.maps.event.addListener(HotelLib.octopusPolygon, 'mousedown', function(mdEvent) {


    // if a midpoint is clicked on, mdEvent.edge will have an integer value
    if(mdEvent.edge || (mdEvent.edge == 0)){

        // immediately reset the polygon to its former paths
        // effectively disabling the drag to edit functionality
        HotelLib.octopusPolygon.setPaths(octopusPaths);

        // hide the midpoints again since re-setting the polygon paths
        // will show the midpoints
        $('#multi_markers div[style*="opacity: 0.5"]').hide();

    }

});
于 2017-01-05T09:26:43.523 に答える