React Google Maps API调用panTo定位当前位置报NaN如何解决

• 组件初始化时就执行了let test = {lat: parseFloat(userLat), lng: parseFloat(userLong)}，此时userLat、userLong都是未赋值的undefined，parseFloat(undefined)会返回NaN，后续即使定位回调里修改了两个普通变量的值，test对象的属性也不会同步更新，点击按钮传入panTo的始终是带NaN的无效坐标，直接触发参数类型错误。
• 普通let声明的变量不会触发React组件重渲染，定位回调里给普通变量赋值的操作，既不会更新已生成的坐标对象，也无法让组件感知到位置变化。
• 多余的parseFloat转换没有必要：navigator.geolocation接口返回的latitude、longitude字段本身就是数值类型，不需要做字符串转数字的处理。
• 缺少边界判断：地图未加载完成、用户拒绝定位权限、定位未完成时直接调用panTo会触发额外报错。

用React state存储用户位置，定位成功后更新state，点击按钮时读取最新的有效坐标传入方法，同时增加必要的边界判断，修复后完整代码如下：

const AddSpotPage = (props) => {
    const {isLoaded}= useJsApiLoader({
      googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
    })

    const [map, setMap]= useState(/** @type google.maps.GoogleMap */(null))
    // 用state存储用户位置，初始值为null
    const [userPos, setUserPos] = useState(null)

    const center = {lat: 50.8584, lng: 12.2945}

    useEffect(()=> {
      navigator.geolocation.getCurrentPosition(
        position =>{
          // 定位成功后直接更新state，坐标本身是数值类型无需转换
          setUserPos({
            lat: position.coords.latitude,
            lng: position.coords.longitude
          })
        },
        err => {
          console.error('定位获取失败：', err)
        }
      )
    },[]);

    // 地图脚本未加载完成时展示加载状态
    if (!isLoaded) return <div>地图加载中...</div>

    const handlePanToUserLocation = () => {
      if (!map) return
      if (!userPos) {
        alert('暂未获取到当前位置，请检查定位权限是否开启')
        return
      }
      map.panTo(userPos)
    }

    return (
      <div className="pt-5 justify-content-center align-items-center d-flex w-100"
        style={{
          backgroundSize: "cover",
          height: "100vh",
        }}
      >
        <GoogleMap 
          center={center} 
          zoom={15} 
          mapContainerStyle={{width: "80%", height:"80%"}}
          onLoad={map=>setMap(map)}
        >
        </GoogleMap>
        <button onClick={handlePanToUserLocation}>Pan Location</button>
      </div>
    );
};

export default AddSpotPage;

• 移除了组件顶层的普通经纬度变量和固定的test坐标对象，改用useState存储用户位置，定位成功后触发组件更新，保证点击时能拿到最新坐标
• 删除了无效的parseFloat转换逻辑，直接使用定位接口返回的数值类型坐标
• 增加了定位失败、地图未加载、位置未获取的边界判断，避免无效调用API
• 增加地图脚本加载状态判断，等依赖加载完成后再渲染交互元素

内容的提问来源于stack exchange，提问作者Aaron Espinoza