Q&A
marker を配列などに納めておけばいいのではありませんか？
Leafletを利用して、マーカーを複数個ユーザーにプロットさせ最終的に実行ボタンですべての座標を取得できるようなコードを検討しています。以下の様なコードで複数プロットすることや、それぞれをドラッグすることができたのですが、例えば10個プロットした後に、纏めて10個すべての座標を取得しようとしても、positionで取得できるのは、最後に動かした座標のみです。markerObjectの中身も見たのですが、特にすべての座標の記録はプロパティとしてなかったようなのですが、方法がわかる方がいらっしゃれば、アドバイスを頂ければ幸いです。
宜しくお願い申し上げます。
html
1 <body> 2 <div class="wrapper"> 3 <div id="map"></div> 4 </div> 5 </body>
jaavscript
1<script> 2 var map = L.map('map').setView([35.680552,139.766923],11); 3 var tileLayer =L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 4 { 5 attribution:'© <a href="http://openstreetmap.org/copyright">OpenStreetMap</a>' 6 }); 7 tileLayer.addTo(map) 8 9map.on('click',function(e){ 10 11 var Icon1 = L.icon({ 12 iconUrl: 'marker.png', 13 iconRetinaUrl: 'marker.png', 14 iconSize: [25, 25], 15 iconAnchor: [25, 50], 16 popupAnchor: [0, -50], 17}); 18 19 var idnum = 1 20 21 marker = new L.marker(e.latlng, {id:idnum, icon:Icon1, draggable:'true'}); 22 marker.on('dragend', function(event){ 23 var marker = event.target; 24 var position = marker.getLatLng(); 25 console.log(position); 26 marker.setLatLng(position,{id:idnum,draggable:'true'}).bindPopup(position).update(); 27 // console.log(marker); 28 }); 29 map.addLayer(marker); 30}) 31 32 33</script>
回答1件
0
ベストアンサー
質問者様
いまだと[marker]変数を使いまわされていますよね
これをまず配列にします
javascript
1var markers = []; 2markers.push(new L.marker(e.latlng, {id:idnum, icon:Icon1, draggable:'true'})); 3markers[markers.length - 1].on('dragend', function(event){ 4 var marker = event.target; 5 var position = marker.getLatLng(); 6 console.log(position); 7 marker.setLatLng(position,{id:idnum,draggable:'true'}).bindPopup(position).update(); 8 // console.log(marker); 9});
座標情報は以下の通りで取得できます。
javascript
1markers[0]._map._lastCenter.lat 2markers[0]._map._lastCenter.lng
投稿2020/10/13 16:02
総合スコア2506
あなたの回答
tips
プレビュー
