Vue项目中用Leaflet-geosearch获取选中标记的经纬度方法

你不需要监听地图的layer事件，leaflet-geosearch本身提供了专门的回调/事件来获取用户选中的点位信息，两种方式任选其一：

方式一：使用onResultSelect回调（推荐） #

在初始化GeoSearchControl时，直接配置onResultSelect回调函数，用户选中搜索结果时会自动触发，直接拿到经纬度：

initLeaflet() {
    this.map = Leaflet.map('map')
        .setView([51.505, -0.09], 13)
    Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(this.map)

    const searchControl = new GeoSearchControl({
        provider: new OpenStreetMapProvider(),
        style: 'bar',
        // 添加选中结果的回调函数
        onResultSelect: (result) => {
            // result.location中x为经度，y为纬度
            const latitude = result.location.y;
            const longitude = result.location.x;
            console.log('选中的经纬度：', latitude, longitude);
            // 可将经纬度存入Vue的data中，比如：
            // this.selectedLatLng = [latitude, longitude];
        }
    });
    this.map.addControl(searchControl)
}

方式二：监听控件的geosearch/showlocation事件 #

如果更倾向于事件监听的方式，可给搜索控件绑定对应事件：

initLeaflet() {
    this.map = Leaflet.map('map')
        .setView([51.505, -0.09], 13)
    Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(this.map)

    const searchControl = new GeoSearchControl({
        provider: new OpenStreetMapProvider(),
        style: 'bar',
    });
    this.map.addControl(searchControl)

    // 绑定事件获取标记的经纬度
    searchControl.on('geosearch/showlocation', (e) => {
        const latLng = e.marker.getLatLng();
        console.log('选中的经纬度：', latLng.lat, latLng.lng);
    })
}

为什么之前的方法没用？ #

你之前监听地图的layer事件无效，是因为leaflet-geosearch内部添加标记的逻辑未触发这个通用事件，控件本身已经封装了选中结果的回调和事件，直接使用官方提供的方式才是正确路径。

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