如何解决如何使用 react-leaflet 显示我的搜索栏?
我正在尝试使用 react-leaflet
库,因此我创建了一个组件 SearchControl,但不幸的是它不起作用......
这是我的组件的代码:
import { useEffect } from "react";
import { useMap } from "react-leaflet";
import { GeoSearchControl } from "leaflet-geosearch";
import "react-leaflet-geosearch/lib/react-leaflet-geosearch.css";
const SearchControl = props => {
const map = useMap();
useEffect(() => {
const searchControl = new GeoSearchControl({
provider: props.provider,...props
});
map.addControl(searchControl);
return () => map.removeControl(searchControl);
},[props]);
return null;
};
export default SearchControl;
但问题是我收到以下错误:_reactLeaflet.useMap is not a function
。
我该怎么做才能解决这个问题?
你可以在那里看到完整的代码:My code
非常感谢您的帮助!
解决方法
您的 package.json 中的依赖项已过时。
更改 react-leaflet 以使用 v3.2.0。
另外,您需要包含原始的 react 钩子(用于 useEffect),因此 react 应该至少构建在 v16.8.0 上。
这是更新的 package.json:
{
"name": "react-leaflet","version": "1.0.0","description": "","keywords": [],"main": "src/index.js","dependencies": {
"leaflet": "1.7.1","react": "17.0.2","react-dom": "17.0.2","react-leaflet": "3.2.0","react-leaflet-fullscreen": "1.0.1","react-leaflet-geosearch": "0.3.0","react-scripts": "4.0.3"
},"devDependencies": {},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test --env=jsdom","eject": "react-scripts eject"
}
}
编辑:
除了评论之外,这是一个更新的 index.js
,它使用 MapContainer
而不是 Map
:
import React from "react"; import ReactDOM from "react-dom"; import { MapContainer,TileLayer,Marker,Popup } from "react-leaflet"; import "./styles.css"; import { OpenStreetMapProvider } from "react-leaflet-geosearch"; import SearchControl from "./SearchControl";
const App = () => { const prov = OpenStreetMapProvider();
return (
<div>
<MapContainer center={[51.505,-0.091]} zoom={13}>
<TileLayer
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
<SearchControl
provider={prov}
showMarker={true}
showPopup={false}
popupFormat={({ query,result }) => result.label}
maxMarkers={3}
retainZoomLevel={false}
animateZoom={true}
autoClose={false}
searchLabel={"Enter address,please"}
keepResult={true}
/>
</MapContainer>
</div> ); };
const rootElement = document.getElementById("root"); ReactDOM.render(<App />,rootElement);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。