当我使用 leaflet-control-geocoder 知道 React-Leaflet 中的纬度和经度时，如何检索地点的地址？

Question

我知道LatLng，但我想检索类似于以下链接的库的地址：https://github.com/perliedman/leaflet-control-geocoder，但我不知道如何使用这个库进行react-leaflet 2.1.2.

Answer 1

要使用 leaflet-control-geocoder 获取地址，您需要使用reverse本示例中的方法

import L from 'leaflet';
import LCG from 'leaflet-control-geocoder';
...
componentDidMount() {
    const map = this.leafletMap.leafletElement;
    const geocoder = LCG.L.Control.Geocoder.nominatim();
    let marker;

    map.on('click', e => {
        geocoder.reverse(e.latlng, map.options.crs.scale(map.getZoom()), results => {
            var r = results[0];
            if (r) {
                if (marker) {
                    marker.
                        setLatLng(r.center).
                        setPopupContent(r.html || r.name).
                        openPopup();
                } else {
                    marker = L.marker(r.center)
                        .bindPopup(r.name)
                        .addTo(map)
                        .openPopup();
                }
            }
        })
    })
}

在渲染方法中：

const height = {height: '100vh' };
const center = { lat: 51.50, lng: 0.12 };
...
<Map 
    style={height}
    center={center} 
    zoom={18}
    ref={m => { this.leafletMap = m; }}>
    <TileLayer           
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' />
</Map>

演示