在 Map 和 navigator.geolocation 上使用 Leaflet 的多个事件

Posted 2023-02-23

【中文标题】在 Map 和 navigator.geolocation 上使用 Leaflet 的多个事件

【英文标题】：Multiple Events using Leaflet on Map and navigator.geolocation

【发布时间】：2019-09-05 14:11:03

【问题描述】：

我正在尝试获取在Leaflet 地图上发生的三个事件：

1 用一个 marker 实例化一个 Leaflet 映射，这也是映射的中心。

2 使用navigator.geolocation.getCurrentPosition 获取用户位置，它会更新lat/lon 表单字段，然后将另一个marker 与coordinates 一起放在地图上。

3 单击地图后，插入第三个marker，再次更新lat/lon 表单字段。

我知道navigator.geolocation.getCurrentPosition 是异步的，所以它必须包含几乎所有内容。

当前：我已经完成了第一点。我没有收到navigator.geolocation.getCurrentPosition marker，但表格确实更新了。我也无法点击新的第三个pointer marker。

问题：我怎样才能让所有三个标记都正常工作？

<div id="warning"></div>

<form method="post" action="#" name="meform">
  <label for="latFld">Lat/Lon</label>
  <input type="text" name="mylat" id="lat" value="44.444" readonly>,<input type="text" name="mylon" id="lon" value="-79.999" readonly> acc: <input type="text" name="myacc" id="acc" value="" readonly> metres
</form>

<div class="row">
  <div class="col-md-12">
    <div id="mapid" style="width: 95%; height: 500px;"></div>
  </div>
</div>

<script>

var homeIcon = L.icon(
  iconUrl:      '/img/house_marker.png',
  iconSize:     [24, 24],
  iconAnchor:   [12, 24],
  popupAnchor:  [0, -24]
  );
var mymarkers = L.layerGroup([
  L.marker([ 43.669128, -79.343001 ], icon: homeIcon).bindPopup("Get Gas Here")
  ]);

function foundLocation(pos) 
  myLat = pos.coords.latitude;
  myLon = pos.coords.longitude;
  myAcc = pos.coords.accuracy;
  document.getElementById("lat").value = myLat;         // form field
  document.getElementById("lon").value = myLon;         // form field
  document.getElementById("acc").value = myAcc;         // form field

  var mymap = L.map('mapid', 
    center:       [ 43.669128, -79.343001 ],
    minZoom:      2,
    maxZoom:      18,
    zoom:         15,
    layers: [mymarkers]
    );

  L.tileLayer('https://api.tiles.mapbox.com/v4/id/z/x/y.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', 
        attribution: 'Map data &copy; <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a> Imagery © <a href="http://mapbox.com" target="_blank">Mapbox</a>',
        id: 'mapbox.streets'
      ).addTo(mymap);

  L.control.layers(mymarkers).addTo(mymap);
  console.log("alpha");

  L.marker([ myLat, myLon ], icon: homeIcon).bindPopup("We measured you here<br>Accuracy: " + myAcc + " metres").addTo(mymarkers);

  mymap.on('click', function(e) 
  alert("clicked");
    document.getElementById("lat").value = e.latlng.lat;
    document.getElementById("lon").value = e.latlng.lng;
    L.marker([e.latlng.lat,e.latlng.lng]).bindPopup('Chosen Location').addTo(mymarkers);
    $('#warning').html("Values updated");
    );

  ;

function noLocation() 
  document.getElementById("warning").innerHTML = "Could not find your location";
  ;

options = 
  enableHighAccuracy:     true,
  timeout:                5000,
  maximumAge:             0
  ;

navigator.geolocation.getCurrentPosition(foundLocation, noLocation, options);

</script>

【参考方案1】：

已解决

<script>
var myLat = -79.999
var myLon = 44.444

var homeIcon = L.icon(
  iconUrl:      '/img/house_marker.png',
  iconSize:     [24, 24],
  iconAnchor:   [12, 24],
  popupAnchor:  [0, -24]
  );
var mymarkers = L.layerGroup([
  L.marker([ 43.669128, -79.343001 ], icon: homeIcon).bindPopup("Get Gas Here")
  ]);
var chosenmarker = L.layerGroup([
  ]);

function foundLocation(pos) 
  myLat = pos.coords.latitude;
  myLon = pos.coords.longitude;
  myAcc = pos.coords.accuracy;
  document.getElementById("lat").value = myLat;         // form field
  document.getElementById("lon").value = myLon;         // form field
  document.getElementById("acc").value = myAcc;         // form field

  L.marker([ myLat, myLon ], icon: homeIcon).bindPopup("We measured you here<br>Accuracy: " + myAcc + " metres").addTo(mymarkers);

  var mymap = L.map('mapid', 
    center:       [ 43.669128, -79.343001 ],
    minZoom:      2,
    maxZoom:      18,
    zoom:         15,
    layers: [mymarkers, chosenmarker]
    );
  L.tileLayer('https://api.tiles.mapbox.com/v4/id/z/x/y.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', 
        attribution: 'Map data &copy; <a href="http://openstreetmap.org" target="_blank">OpenStreetMap</a> Imagery © <a href="http://mapbox.com" target="_blank">Mapbox</a>',
        id: 'mapbox.streets'
      ).addTo(mymap);

  console.log("alpha");

  mymap.on('click', function(e) 
    console.log("clicked");
    chosenmarker.clearLayers();
    document.getElementById("lat").value = e.latlng.lat;            // set form fields lat
    document.getElementById("lon").value = e.latlng.lng;            // set form fields lon
    L.marker([e.latlng.lat,e.latlng.lng]).bindPopup("Chosen Location").addTo(chosenmarker);
    $('#warning').html("Values updated");
    );

  L.control.layers(mymarkers, chosenmarker).addTo(mymap);
  ;

function noLocation() 
  document.getElementById("warning").innerHTML = "Could not find your location";
  ;

options = 
  enableHighAccuracy:     true,
  timeout:                5000,
  maximumAge:             0
  ;

navigator.geolocation.getCurrentPosition(foundLocation, noLocation, options);

</script>

首先，提供变量和layerGroups（Leaflet对象），然后启动navigator.geolocation.getCurrentPosition。 lat和lon抓到了，用中心提供的lat和lon制作的地图。然后是第二个基于点击的L.marker 的实现，这会触发名为chosenmarker 的L.layergroup 的清除，这也会更新表单并在地图上放置marker。那将永远是一个对象。这样操作数 chosenmarker.clearLayers(); 不会擦除前两个硬markers。