无法获取Marker的经纬度用于L.Routing.control，求可行解决方案

现有代码问题点 #

• 事件绑定对象错误：L.marker是Marker类，你没有给循环创建的每个Marker实例绑定双击事件，导致事件无法触发
• 异步逻辑错误：双击是用户触发的异步行为，你在初始化路由控件时同步调用getdest()取值，此时用户尚未执行双击操作，必然拿不到有效结果
• 变量作用域错误：latlng_dest定义在双击事件回调函数内部，外部作用域无法访问该变量
• API调用错误：Leaflet事件对象的latlng是属性而非方法，不需要加()执行

修正后完整代码 #

var places = [
  ["LOCATION_1", 8.9856146341374, -79.51102268985925],
  ["LOCATION_2", 8.984640842221594, -79.51383510471848],
  ["LOCATION_3", 8.972080043026754, -79.5529245611453],
  ["LOCATION_4", 9.052896045979661, -79.4515923525883],
  ["LOCATION_5", 9.053366385577624, -79.50832832626823]
];

var map = L.map('map', {
    center: [9.352867999999996, -79.689331],
    zoom: 9,
    layers:L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
        maxZoom: 20,
        subdomains:['mt0','mt1','mt2','mt3']
    })
});

// 存储起点和路由控件实例
let startLatLng = null;
let routingControl = null;

// 循环创建Marker时绑定双击事件
for (var i = 0; i < places.length; i++) {
  const marker = new L.marker([places[i][1], places[i][2]])
    .bindPopup(places[i][0])
    .addTo(map);
  // 给每个Marker实例绑定双击事件
  marker.on('dblclick', function(e) {
    const destLatLng = e.latlng;
    console.log('双击获取的目标经纬度：', destLatLng);
    // 已经拿到起点的话就创建/更新路由
    if (startLatLng) {
      // 之前有路由控件就先移除
      if (routingControl) map.removeControl(routingControl);
      // 创建新的路由控件
      routingControl = L.Routing.control({
        waypoints: [
          L.latLng(startLatLng),
          L.latLng(destLatLng)
        ]
      }).addTo(map);
    }
  })
}

// 获取当前位置作为起点
navigator.geolocation.getCurrentPosition(function(location) {
  startLatLng = new L.LatLng(location.coords.latitude, location.coords.longitude);  
});

修正逻辑说明 #

• 创建每个Marker的时候直接给实例绑定双击事件，确保用户双击任意Marker都能触发回调
• 先获取用户当前位置存为起点，等用户双击Marker拿到目标点之后，再动态创建路由控件，避免异步时序问题
• 直接在事件回调内处理经纬度的后续逻辑，避免作用域问题
• 修正了e.latlng的调用方式

内容的提问来源于stack exchange，提问作者Alexis Garcia