使用Geocoder的地图无法定位正确位置，停留在默认坐标

使用react-leaflet和esri-leaflet-geocoder开发的地图组件，标记点始终显示默认坐标，不会根据传入的地址定位并缩放。代码在其他环境可正常运行，当前无终端或控制台报错。

相关代码 #

GeoCoderMarker.jsx #

import React, { useEffect, useState } from 'react'
import { Marker, Popup, useMap } from 'react-leaflet'
import L from 'leaflet'
import "leaflet/dist/leaflet.css"
import icon from "leaflet/dist/images/marker-icon.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
import * as ELG from 'esri-leaflet-geocoder'

let DefaulIcon = L.icon ({
    iconUrl : icon, 
    shadowUrl: iconShadow
})
L.Marker.prototype.options.icon = DefaulIcon


const GeoCoderMarker = ({address}) => {

    const map = useMap()
    const [position, setPosition] = useState([60, 19])

    useEffect(()=> {
        ELG.geocode().text(address).run((err, results, response)=> {
            if(results?.results?.length > 0){
                const {lat, lng} = results?.results[0].latlng
                setPosition([lat, lng])
                map.flyTo([lat, lng], 6)
            }
        })
    }, [address])

  return (
    <Marker position={position} icon={DefaulIcon}>
        <Popup/>
    </Marker>
  )
}

export default GeoCoderMarker

Map.jsx #

import React from 'react'
import {MapContainer, TileLayer} from 'react-leaflet'
import GeoCoderMarker from '../GeoCoderMarker/GeoCoderMarker'
const Map = ({address, city, country}) => {
  return (
    <MapContainer
    center={[53.35, 18.8]}
    zoom={1}
    scrollWheelZoom={false}
    style={{
        height: "40vh",
        width: "100%",
        marginTop: "20px",
        zIndex: 0,
       
    }}
    >
        <TileLayer url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'/>
        <GeoCoderMarker address={`${address} ${city} ${country}`} />
    </MapContainer>
  )
}

export default Map

排查与解决方案 #

1. 校验地址参数有效性
   确认传入的address、city、country拼接后是合法可解析的地址，避免空值或格式错误（比如某字段为空导致拼接出 城市 国家这类无效地址）。可以在GeoCoderMarker的useEffect中先打印地址参数，确认输入正确：

   useEffect(()=> {
       console.log('当前待解析地址：', address)
       // 原有地理编码逻辑
   }, [address])
   

2. 补全错误处理逻辑
   当前代码仅处理了地理编码成功的情况，若编码失败（地址无效、网络异常等）不会有任何反馈。添加错误捕获和无结果提示：

   ELG.geocode().text(address).run((err, results, response)=> {
       if(err) {
           console.error('地理编码请求失败：', err)
           return
       }
       if(results?.results?.length > 0){
           const {lat, lng} = results?.results[0].latlng
           setPosition([lat, lng])
           map.flyTo([lat, lng], 6)
       } else {
           console.warn('未找到匹配的地址：', address)
       }
   })
   

3. 完善useEffect依赖项
   useEffect的依赖数组仅包含address，但map实例也是依赖项，显式添加可避免潜在的实例未就绪问题：

   useEffect(()=> {
       // 原有逻辑
   }, [address, map])
   

4. 确认地图实例初始化状态
   确保useMap获取的地图实例已完全初始化，可添加实例存在性判断：

   useEffect(()=> {
       if(!map) return
       // 原有地理编码逻辑
   }, [address, map])
   

5. 检查网络请求状态
   打开浏览器Network面板，查看地理编码请求的状态码和响应内容，确认是否存在隐性跨域限制或API权限问题。

内容的提问来源于stack exchange，提问作者Shashwat Shrivastava