0

ユーザーが地図上にマーカーを配置できるリーフレット API を使用しています。マーカーを配置するためのカスタム ボタンを作成しました。

私はこれらのマーカーの間に線を引いても構わないと思って L.polylines()います. 最初の作業では、静的座標を渡しました(reqとして機能します)。

L.easyButton('fa-link', function () {

var secureThisArea = [[-81, 100.75], [-76.50, 245.75], [-145.50, 184.25], [-128, 311.75]];

    map.on('click', function fencePlace(e) {

    L.marker([-81, 100.75], { icon: fenceIcon, draggable: true }).bindPopup("this is first").addTo(map);
    L.marker([-76.50, 245.75], { icon: fenceIcon, draggable: true }).bindPopup("this is second").addTo(map);
    L.marker([-145.50, 184.25], { icon: fenceIcon, draggable: true }).bindPopup("this is third").addTo(map);
    L.marker([-128, 311.75], { icon: fenceIcon, draggable: true }).bindPopup("this is fourth").addTo(map);
    L.polyline(secureThisArea).addTo(map);

});
                }).addTo(map);
4

2 に答える 2

2

あなたが正しく理解している場合は、クリック時にマーカーを作成し、それらをポリラインで接続したいと考えています。これは、説明するコメント付きのコードで簡単に実行できます。

// Create new empty polyline and add it to the map
var polyline = new L.Polyline([]).addTo(map);

// Handle map click event
map.on('click', function(event) {

    // New marker on coordinate, add it to the map
    new L.Marker(event.latlng).addTo(map);

    // Add coordinate to the polyline
    polyline.addLatLng(event.latlng);

});

その後、ポリラインに追加されたすべての座標を取得したい場合は、オブジェクトの配列を返すgetLatLngsメソッドを使用できます。L.PolylineL.LatLng

参考： http: //leafletjs.com/reference.html#polyline

例: http://plnkr.co/edit/h7aMwc?p=preview

于 2015-09-14T12:50:40.450 に答える
2

配列に別の値を追加するのは簡単です。例えば:

secureThisArea.push([-81, 100.75]);

Mozilla Developer Networkで詳細 (その他の JavaScript 関連も) を見つけることができます。

マーカー オブジェクトの座標を使用する場合は、次の方法で取得できます。

var myMarker = L.marker([-81, 100.75], { icon: fenceIcon, draggable: true }),
    latLng = null;

latLng = myMarker.getLatLng();

リーフレットのドキュメントもご覧ください。

于 2015-09-14T12:43:07.197 に答える