gpt4 book ai didi

javascript - React-Leaflet 搜索框实现

转载 作者:行者123 更新时间:2023-11-29 10:03:51 25 4
gpt4 key购买 nike

是否有任何资源展示了使用 react-leaflet 实现的搜索框?

我想让我的 map 图钉填充到一个搜索结果中,该结果将查询和检索我的现有数据。

即:

const names = [

{name: 'Joe', location: '40.734621, -73.989341 '},
{name: 'Seth', location: '45.77621, -73.789654 '},

]

然后,在搜索 Joe 或 Seth 之后, map 将填充位置坐标。

我找到了 leaflet.js 的示例,但找不到任何使用 react-leaflet 旋转的示例。

最佳答案

看看leaflet-geosearch

使用 npm install --save leaflet-geosearch 安装它

然后你只需要用它构建一个组件:

import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch';

class Search extends MapControl {

createLeafletElement() {
return GeoSearchControl({
provider: new OpenStreetMapProvider(),
style: 'bar',
showMarker: true,
showPopup: false,
autoClose: true,
retainZoomLevel: false,
animateZoom: true,
keepResult: false,
searchLabel: 'search'
});
}
}

export default Search;

并在 map 中使用您的组件:

render() {
return (
<Map>
(...)
<Search />
</Map>
);
}

关于javascript - React-Leaflet 搜索框实现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48290555/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com