簡體   English   中英

如何標記搜索變得可拖動並在 leaflet 中給出經度和緯度

[英]How to marker search become draggable and give the Longitude & latitude in leaflet

我希望我的 leaflet map 能夠拖動標記並獲取經度和緯度。 搜索結果中的標記顯示。 這是我的 js 代碼,但我卡住了 T^T 請幫幫我。 謝謝

在這里我的 HTML 用於地址和緯度經度

<form>
 <p>
    <label for="address">Address</label>
    <input id="address">
  </p>

   <p>
      <label for="latitude">Lintang</label>
      <input id="latitude" placeholder="-6.922045042885848">
   </p>

    <p>
      <label for="longitude">Bujur</label>
      <input id="longitude" placeholder="107.61605564716159">
    </p>
</form>

<div class="frame-lokasi">
  <div id="map"></div>
</div>

這里是我的 js

var map = L.map('map', {
        center: [-6.922045042885848, 107.61605564716159],
        zoom: 18
    });

    L.control.scale().addTo(map);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var searchControl = new L.esri.Controls.Geosearch().addTo(map);

    var results = new L.LayerGroup('resuls', {draggable: true}).addTo(map);

    var marker = L.marker([-6.922045042885848, 107.61605564716159], {
        draggable: true
    }).addTo(map);

    marker.on('dragend', function (e) {
        document.getElementById('latitude').value = marker.getLatLng().lat;
        document.getElementById('longitude').value = marker.getLatLng().lng;
    });

    searchControl.on('results', function(e){
        results.clearLayers();
        for (var i = e.results.length - 1; i >= 0; i--) {
            results.addLayer(L.marker(e.results[i].latlng));
        }
    });

    setTimeout(function(){$('.pointer').fadeOut('slow');},3400);

更新這一行: results.addLayer(L.marker(data.results[i].latlng));

searchControl.on('results', function(e) {
    results.clearLayers();
    for (var i = e.results.length - 1; i >= 0; i--) {
        var searchMarker = L.marker(data.results[i].latlng, {
            draggable: true
        });
        document.getElementById('latitude').value = searchMarker.getLatLng().lat; 
        document.getElementById('longitude').value = searchMarker.getLatLng().lng;

        searchMarker.on('dragend', function(e) {
            console.log(e);
            var _marker = e.target;
            console.log(_marker.getLatLng())
            document.getElementById('latitude').value = _marker.getLatLng().lat; 
            document.getElementById('longitude').value = _marker.getLatLng().lng;
        })
        results.addLayer(searchMarker);
    }
});

data.results是錯字嗎? L.marker(data.results[i].latlng, { data is nowhere defined 也許e.results

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM