Question

我正在尝试使用CounterConsumer.consumeCounter()将搜索栏添加到React（leaflet-geosearch）的传单地图中

react-leaflet

运行此命令时出现TypeError：

TypeError：无法读取未定义的属性“ map” Search.componentDidMount

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>
    )
  }
}

有人成功地在其传单地图中添加了搜索栏吗？

Answer 1

const GeoSearch = withLeaflet(Search)

Answer 2

更改列表：

使用withLeaflet HOC包装您的组件，以确保在加载地图后对控件进行初始化，例如export default withLeaflet(GeoSearch);
控件明确添加到地图中 componentDidMount函数中的示例
leaflet-geosearch css需要被引用，例如通过public/index.html

示例

class Search extends MapControl {

  createLeafletElement(opts) {
    const provider = new OpenStreetMapProvider();
    const searchControl = new GeoSearchControl({
      provider: provider,
      //position: "topleft",
      style: "bar"
    });

    return searchControl;
  }

  componentDidMount() {
    const { map } = this.props.leaflet;
    map.addControl(this.leafletElement);
  }
}

这里是a demo

Answer 3

使用“ withLeaflet”

在这里回答 https://github.com/smeijer/leaflet-geosearch/issues/167#issuecomment-403107336

在这里 https://react-leaflet.js.org/docs/en/custom-components.html

getState

使用Leaflet-geosearch添加Searchbar

3 个答案: