Блог

Главная - Вопросы по программированию - Листовка с реакцией, название места, а не координаты

Листовка с реакцией, название места, а не координаты

#javascript #reactjs #leaflet #geocoding #react-leaflet

#javascript #reactjs #листовка #геокодирование #react-листовка

Вопрос:

Возможно ли отобразить карту в листовке с реакцией, указав название места, а не координаты карты? Вместо указания координат места я хочу ввести название места, например. «Парк Сент-Джеймс» или «Автодром Барселона-Каталония»

 import React from "react";
import { MapContainer, TileLayer } from "react-leaflet";

function MyMap() {
  const position = [53.35, 18.8];
  return (
    <MapContainer
      className="map"
      center={position}
      zoom={6}
      style={{ height: 500, width: "100%" }}>
      <TileLayer
        attribution='amp;amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
    </MapContainer>
  );
}
export default MyMap;

Комментарии:

1. Сначала вам нужно выполнить геообзор для названия места, а затем указать координаты в листовке. Вы можете посмотреть Nominatim , например, для поиска данных OpenStreetMap.

Ответ №1:

Вам нужно применить геокодирование. Одним из решений является использование esri-leaflet-geocoder библиотеки.

Установите его через npm i esri-leaflet-geocoder и создайте Geocoder компонент, который примет адрес и установит вид карты на выбранное местоположение после преобразования адреса в координаты.

     function Geocoder({ address }) {
        const map = useMap();
    
        ELG.geocode()
          .text(address)
          .run((err, results, response) => {
            console.log(results.results[0].latlng);
            const { lat, lng } = results.results[0].latlng;
            map.setView([lat, lng], 12);
          });
    
        return null;
      }

Используйте это так :

     <MapContainer
          className="map"
          center={position}
          zoom={6}
        >...
          <Geocoder address="Circuit de Barcelona-Catalunya" />
      </MapContainer>

ДЕМОНСТРАЦИЯ

Ответ №2:

Сначала вам нужно выполнить геообзор с именем места, как в одном из упомянутых комментариев. Вот небольшой пример с javascript. Я думаю, вы можете реализовать это в React. Я буду использовать библиотеку листовок для рисования карты с использованием широты и длины, которые я получу из запроса Nominatim.

 <div id="map" class="map">
<script>
... // getting user input
// incoming user address from input should be encoded to be used in url
const encodedAddress = encodeURIComponent(addressComingFromInput);
const nominatimURL = 'https://nominatim.openstreetmap.org/?addressDetails=1amp;q='   encodedAddress   'format=jsonamp;limit=1';
// fetch lat and long and use it with leaflet
fetch(nominatimURL)
   .then(response => response.json())
   .then(data => {
       const lat = data[0].lat;
       const long = data[0].lon;
       const osmTileUrl = 'https://{s}.tile.osm.org/{z}/{x}/{y}.png';
       let map = L.map('map').setView([lat, long], zoomLevel);
       L.tileLayer(osmTileUrl, {
           attribution: 'amp;copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
                            }).addTo(map);
      let marker = L.marker([lat, long]).addTo(map);
      marker.bindPopup(userAddress).openPopup();
   });
</script>
Метки: