React-leaflet v3.1.0 中的搜索框实现

如何解决React-leaflet v3.1.0 中的搜索框实现

我正在尝试在我的 React 应用中实现 searchbox 功能。但是在新版本的react-leaflet中出现这个错误“Attempted import error: 'MapControl' is not export from 'react-leaflet'”

import { MapContainer,TileLayer,Polygon,Marker,Popup } from 'react-leaflet';
import "./index.css";

// Cordinates of Marcillac
const center = [45.269169177925754,-0.5231516014256281]
const purpleOptions = { color: 'white' }

class MapWrapper extends React.Component {
    render() {
        return (
            <div id="mapid">
                <MapContainer center={center} zoom={13} scrollWheelZoom={true}>
                    <TileLayer
                        attribution='&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
                        url='https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png'
                    />
                </MapContainer>
            </div>
        )
    }
}

export default MapWrapper;

此处给出的实现 https://stackoverflow.com/questions/48290555/react-leaflet-search-box-implementation 不起作用，因为 MapControl 已被描述。

也尝试了第二个解决方案。

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>

  )
}

这里我得到 map.addControl 未定义

解决方法

你的方法是正确的。您刚刚混淆了 react-leaflet 版本。

你这样做的方式在 react-leaflet 2.x 版中是正确的

对于 react-leaflet v.3.x，您的自定义组合应如下所示：

function LeafletgeoSearch() {
  const map = useMap(); //here use useMap hook

  useEffect(() => {
    const provider = new OpenStreetMapProvider();

    const searchControl = new GeoSearchControl({
      provider,marker: {
        icon
      }
    });

    map.addControl(searchControl);

    return () => map.removeControl(searchControl)
  },[]);

  return null;
}

您可以从 useMap 挂钩而不是 useLeaflet 获取地图参考。

Demo