javascript - React-Leaflet搜索框实现

是否有任何资源显示带有react-leaflet的搜索框实现？

我想在查询和检索我现有数据的搜索结果中填充 map 图钉。

IE:

const names = [

  {name: 'Joe', location: '40.734621, -73.989341 '},
  {name: 'Seth', location: '45.77621, -73.789654 '},

]

然后，在搜索Joe或Seth之后， map 将填充位置坐标。

我找到了leaflet.js的示例，但是找不到任何用react-leaflet旋转的示例。

最佳答案

看看leaflet-geosearch

用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;

并在 map 中使用您的组件:

render() {
  return (
    <Map>
      (...)
      <Search />
    </Map>
  );
}

关于javascript - React-Leaflet搜索框实现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48290555/