是否有任何资源显示使用react-leaflet实现搜索框?
我希望将我的地图图钉填充在搜索结果上,以查询和检索我的现有数据。
即:
const names = [
{name: 'Joe', location: '40.734621, -73.989341 '},
{name: 'Seth', location: '45.77621, -73.789654 '},
]
然后,在搜索 Joe 或 Seth 后,地图将填充位置坐标。
我找到了 leaflet.js 的示例,但找不到任何用 React-leaflet 构建的示例。
使用
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;
并在地图中使用您的组件:
render() {
return (
<Map>
(...)
<Search />
</Map>
);
}
我认为我找到了一种更简单的方法来执行此操作,而无需创建和扩展类。
import { Map, useLeaflet } from 'react-leaflet'
import { OpenStreetMapProvider, GeoSearchControl } from 'leaflet-geosearch'
// make new leaflet element
const Search = (props) => {
const { map } = useLeaflet() // access to leaflet map
const { provider } = props
useEffect(() => {
const searchControl = new GeoSearchControl({
provider,
})
map.addControl(searchControl) // this is how you add a control in vanilla leaflet
return () => map.removeControl(searchControl)
}, [props])
return null // don't want anything to show up from this comp
}
export default function Map() {
return (
<Map {...otherProps}>
{...otherChildren}
<Search provider={new OpenStreetMapProvider()} />
</Map>
)
}
import { Map} from 'react-leaflet'
import { OpenStreetMapProvider, GeoSearchControl } from 'leaflet-geosearch'
// make new leaflet element
const Search = (props) => {
const map = useMap() // access to leaflet map
const { provider } = props
useEffect(() => {
const searchControl = new GeoSearchControl({
provider,
})
map.addControl(searchControl) // this is how you add a control in vanilla leaflet
return () => map.removeControl(searchControl)
}, [props])
return null // don't want anything to show up from this comp
}
export default function Map() {
return (
<MapContainer {...otherProps}>
{...otherChildren}
<Search provider={new OpenStreetMapProvider()} />
</MapContainer >
)
}
这是如果您使用 MapContainer 而不是地图
使用 MapContainer 时有效的解决方案。 传单.GeoSearch
npm i leaflet-geosearch
使用以下代码。
import { useEffect } from "react";
// Search Location
import { GeoSearchControl, OpenStreetMapProvider } from "leaflet-geosearch";
import { useMap, MapContainer } from "react-leaflet";
/**
* Search Location
*/
const SearchLocation = (props) => {
// Get access to leaflet map
const { provider } = props;
// Get search control
const searchControl = new GeoSearchControl({
provider: provider,
});
// Access Leaflet Map
const map = useMap(props);
useEffect(() => {
// Add searchControl to Leaflet map
map.addControl(searchControl);
return () => map.removeControl(searchControl);
});
return null; // Do not render any thing
}
// Call SearchLocation in MyMap
const MyMap = () => {
// ...
return (
<MapContainer>
<SearchLocation provider={new OpenStreetMapProvider()} />
{/* ... */}
</MapContainer>
);
};