如何在React Redux+Leaflet+OpenStreetMap中实现城市搜索功能

一、需要安装的依赖 #

直接安装适配React-Leaflet的地理搜索组件：

npm install react-leaflet-geosearch
# 或使用yarn
yarn add react-leaflet-geosearch

二、代码修改步骤及完整实现 #

1. 导入新增依赖与样式 #

在原文件顶部添加以下导入：

import { useState } from 'react'
import { GeoSearchControl, OpenStreetMapProvider } from 'react-leaflet-geosearch'
import 'react-leaflet-geosearch/dist/style.css'

2. 改造组件逻辑 #

修改原FormDashboardMap组件，添加搜索控件、地图中心状态管理，实现搜索后自动定位：

import React, { useState } from 'react'
import { MapContainer, TileLayer, useMap } from 'react-leaflet'
import { IoLogoDropbox } from 'react-icons/io5'
import { GeoSearchControl, OpenStreetMapProvider } from 'react-leaflet-geosearch'
import 'leaflet/dist/leaflet.css'
import 'react-leaflet-geosearch/dist/style.css'

// 自定义搜索控件组件，挂载到地图实例
function SearchControl() {
  const map = useMap()
  const provider = new OpenStreetMapProvider()

  const searchControl = new GeoSearchControl({
    provider: provider,
    style: 'bar',
    showMarker: true, // 搜索结果处显示标记
    showPopup: false,
    autoClose: true,
    retainZoomLevel: false,
    animateZoom: true,
    keepResult: false,
    searchLabel: '搜索城市...',
  })

  React.useEffect(() => {
    map.addControl(searchControl)
    return () => map.removeControl(searchControl)
  }, [map, searchControl])

  return null
}

function FormDashboardMap() {
  // 初始化地图中心状态，支持后续扩展更新
  const [center, setCenter] = useState([51.505, -0.09])

  return (
    <div>
      <h1 className="title"><IoLogoDropbox/> Map</h1>
      <div className="card has-shadow">
        <div className="card-content">
          <div className="content">
            <MapContainer 
              style={{ height: "450px", width: "100%" }} 
              center={center} 
              zoom={12} // 调整缩放级别适配城市视图
            >
              <TileLayer
                attribution='&copy; OpenStreetMap contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
              />
              {/* 挂载搜索控件 */}
              <SearchControl />
            </MapContainer>   
          </div>
        </div>
      </div>
    </div>
  )
}

export default FormDashboardMap

关键改动说明 #

• 新增SearchControl组件：通过useMap hook获取地图实例，挂载基于OpenStreetMap的搜索控件，内置搜索后自动定位逻辑
• 引入状态管理：用useState维护地图中心，方便后续功能扩展
• 调整默认缩放级别：从19改为12，更符合城市级视图展示
• 移除外链：修改TileLayer的版权声明，移除跳转链接

内容的提问来源于stack exchange，提问作者Ujang Aripin