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

Question

我知道 LatLng，但我想检索类似于 link 之后的库的地址：https://github.com/perliedman/leaflet-control-geocoder，但我不知道如何将此库用于 react-leaflet 2.1 .2.

Answer 1

要使用 leaflet-control-geocoder 获取地址，您需要像 example

中那样使用 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>

Demo

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

How to retrieve a place's address when I know latitude & longitude in React-Leaflet using leaflet-control-geocoder?

javascript

reactjs

leaflet

reverse-geocoding

react-leaflet