javascript - 使用 leaflet-geosearch 添加搜索栏

Question

我正在尝试使用 leaflet-geosearch 将搜索栏添加到 React 中的 Leaflet map (react-leaflet)

import { Map, TileLayer, MapControl } from 'react-leaflet'
import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'

class Search extends MapControl {
  createLeafletElement() {
    return GeoSearchControl({
      provider: new OpenStreetMapProvider(),
      style: 'bar'
    })
  }
}

...

export class MapContainer extends Component {
  render() {
    return (
      <div>
        <Map
          ref={m => { this.leafletMap = m; }}
          center={this.state.position}
          zoom={this.state.zoom}
        >
          <TileLayer
            attribution={tilesAttr}
            url={tilesUrl}
          />
          <Search />
        </Map>
      </div>
    )
  }
}

当我运行这个时，我得到一个类型错误:

TypeError: Cannot read property 'map' of undefined Search.componentDidMount

};

MapControl.prototype.componentDidMount = function componentDidMount() {
-> this.leafletElement.addTo(this.props.leaflet.map);
};

MapControl.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {

有人成功地将搜索栏添加到他们的传单 map 中吗？

Answer 1

const GeoSearch = withLeaflet(Search)