使用Pigeon Maps与React时遇width属性NaN无效警告问题

你遇到的NaN警告本质是地图初始化时拿到了无效的坐标值：

• 全局变量userLatitude和userLongitude一开始没有赋值，组件首次渲染时defaultCenter传入的是[undefined, undefined]，pigeon-maps无法基于无效坐标计算地图布局，进而导致CSS width属性出现NaN。
• 地理定位是异步操作，组件首次渲染完成后定位请求才会返回结果，这时候全局变量才会被赋值，但组件不会自动重新渲染，地图始终用的是初始无效坐标。

改用React状态管理坐标，并通过useEffect执行异步定位逻辑，确保定位完成后组件能重新渲染并传入有效坐标：

import React, { useState, useEffect } from "react"
import {Map, Marker} from "pigeon-maps"
import {maptiler} from 'pigeon-maps/providers'

const maptilerProvider = maptiler('****************', 'streets')

export default function MyMap() {
    // 初始化状态，给一个合法的默认坐标（比如0,0，或者你需要的默认城市）
    const [center, setCenter] = useState([0, 0])

    useEffect(() => {
        if (!navigator.geolocation) {
            console.log("Geolocation not supported");
            return;
        }

        navigator.geolocation.getCurrentPosition(
            (position) => {
                // 定位成功后更新状态，触发组件重新渲染
                setCenter([position.coords.latitude, position.coords.longitude])
            },
            () => {
                console.log("Unable to retrieve your location");
            }
        )
    }, []) // 空依赖数组确保只在组件挂载时执行一次定位

    return (
        <Map
            provider={maptilerProvider}
            dprs={[1, 2]}
            height={600}
            defaultCenter={center}
            defaultZoom={8}
        >
        </Map>
    )
}

• 用useState定义center状态，初始值是合法坐标，保证地图初始化时能正常计算布局。
• 把地理定位逻辑放到useEffect里，空依赖数组确保只在组件第一次挂载时执行一次定位请求。
• 定位成功后调用setCenter更新状态，组件会自动重新渲染，地图拿到有效坐标后就能正常工作。

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