Как получить адрес места, когда я знаю широту и долготу в React-Leaflet с помощью leaflet-control-geocoder?

Я знаю LatLng, но я хотел бы получить адрес, аналогичный библиотеке по следующей ссылке: https://github.com/perliedman/leaflet-control-geocoder, но я не знаю, как использовать эту библиотеку для response-листовки 2.1.2.

Я предлагаю создать ссылку reactjs.org/docs/refs-and-the-dom.html на ваш «объект карты», созданный react-leaflet, а затем использовать geocodergithub.com/perliedman/leaflet-control-geocoder, как предложено в документации. Для получения дополнительной помощи, пожалуйста, разместите свой код там, где вы используете react-leaflet

— 17.12.2018 15:08

Вы хотите ввести адрес в настраиваемый элемент управления и получить местоположение на карте?

— 17.12.2018 16:34

я хочу щелкнуть по карте и получить адрес текущей позиции

— 20.12.2018 08:46

javascript reactjs leaflet reverse-geocoding react-leaflet

17.12.2018 14:50

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 690

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы получить адрес с помощью геокодера-листовки, вам необходимо использовать метод 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>

Демо

20.12.2018 12:28