添加到地图后如何获取标记详细信息？

Question

我正在一个正在实现传单的 vue 项目中使用 这个库。 当用户在图书馆找到所需位置后选择地址时，我需要获取添加的标记。我尝试过使用这段代码但没有成功。我也发现了这个问题，但根本没有帮助。

这就是我目前正在使用的来尝试获取标记信息

this.map.on('layer', (e) => {
    console.log(e)
})

在一种方法中，我以这种方式初始化传单

initLeaflet() {
    this.map = Leaflet.map('map')
        .setView([51.505, -0.09], 13)
        Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        //attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(this.map)
    //
    const searchControl = new GeoSearchControl({
        provider: new OpenStreetMapProvider(),
        style: 'bar',
    });
    this.map.addControl(searchControl)
},

如何正确获取所需信息，从而获得所选点的纬度和经度？

Answer 1

使用 popupFormat 选项在弹出窗口中显示找到的位置的经度和纬度，如 jsfiddle 演示:

'use strict';

var myMap = L.map('mapId').setView([-23.9608, -46.3331], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(myMap);

var search = new GeoSearch.GeoSearchControl({
  provider: new GeoSearch.OpenStreetMapProvider(),
  style: 'bar',
  showPopup: true,
  popupFormat: ({
      query,
      result
    }) =>
    'longitude: ' + parseFloat(result.x).toFixed(6) +
    ', latitude: ' + parseFloat(result.y).toFixed(6)
});

myMap.addControl(search);

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

#mapId {
  flex-grow: 1;
}

<link type="text/css" rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1/dist/leaflet-src.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3/dist/bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet-geosearch@3/dist/geosearch.min.css">

<div id="mapId"></div>

Answer 2

我遇到了完全相同的问题，无法检索所选结果的纬度和经度。

假设您的代码如上面所示，当用户选择结果时，使用它来检索纬度和经度：

map.on('geosearch/showlocation', function(result) {
   var lng = result.location.x;
   var lat = result.location.y;
});