[英]React leaflet, the name of the place, not the coordinates
Is it possible to render a map in React Leaflet giving the name of the place and not the map coordinates?是否可以在 React Leaflet 中渲染地图并给出地点名称而不是地图坐标? Instead of giving coordinates of place i wish to enter place name eg.
我希望输入地名,而不是给出地点的坐标,例如。 "St. James's Park " or "Circuit de Barcelona-Catalunya"
“圣詹姆斯公园”或“巴塞罗那-加泰罗尼亚赛道”
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='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
</MapContainer>
);
}
export default MyMap;
You need to apply geocoding.您需要应用地理编码。 One solution is to use
esri-leaflet-geocoder
library.一种解决方案是使用
esri-leaflet-geocoder
库。
Install it via npm i esri-leaflet-geocoder
and create a Geocoder
component that will take the address and will set the map view to the selected location after converting the address to coordinates.通过
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;
}
Use it like this :像这样使用它:
<MapContainer
className="map"
center={position}
zoom={6}
>...
<Geocoder address="Circuit de Barcelona-Catalunya" />
</MapContainer>
You need to do a geolookup with the placename first like one of the comments mentioned.您需要先像提到的评论之一一样使用地名进行地理查找。 Here is a small example with javascript.
这是一个使用 javascript 的小例子。 You can implement it in React I guess.
我猜你可以在 React 中实现它。 I will be using Leaflet library to draw a map using the lat and long that I will get from Nominatim query.
我将使用 Leaflet 库使用从 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=1&q=' + encodedAddress + 'format=json&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: '© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
let marker = L.marker([lat, long]).addTo(map);
marker.bindPopup(userAddress).openPopup();
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.