如何解决Mapbox GL JS缩放地图时自定义标记偏移问题

• 已尝试现有所有相关解决方案，均未生效。
• 地图初始加载状态下，自定义标记需要手动向右偏移220px才能对齐到正确位置；初始化时使用fitBounds方法适配视图，未设置固定缩放等级。
• 对地图执行放大、缩小操作时，标记会偏离正确坐标位置，仅在特定缩放等级下位置显示准确。
• 使用Turf.js的bbox方法计算GeoJSON数据的边界框作为fitBounds方法的入参，但计算结果存在偏差，这是需要手动偏移标记220px的直接原因。

1. _app.js 文件中Mapbox GL JS样式引入代码 #

import 'mapbox-gl/dist/mapbox-gl.css'

function MyApp({ Component, pageProps }) {
    return <Component {...pageProps} />
}

export default MyApp

2. 地图组件实现代码 #

import React, { useRef, useEffect } from 'react'
import mapboxgl from 'mapbox-gl'
import * as turf from '@turf/turf'

mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN

export default function App() {
    const mapContainer = useRef(null)
    const map = useRef(null)

    const geojson = {
        type: 'FeatureCollection',
        features: [
            {
                type: 'Feature',
                properties: { price: 399, beds: 2 },
                geometry: { type: 'Point', coordinates: [115.1848543, -8.721661] },
            },
            {
                type: 'Feature',
                properties: { price: 450, beds: 3 },
                geometry: { type: 'Point', coordinates: [115.1676773, -8.72259] },
            },
        ],
    }

    const bbox = turf.bbox(geojson)

    useEffect(() => {
        if (map.current) return // 地图仅初始化一次
        map.current = new mapboxgl.Map({
            container: mapContainer.current,
            style: 'mapbox://styles/mapbox/streets-v11',
        })

        for (const marker of geojson.features) {
            // 为每个标记创建DOM元素
            const el = document.createElement('div')

            // 标记显示位置比实际坐标偏左220px，因此添加ml-[220px]样式做偏移
            el.className =
                'flex items-center justify-center h-[30px] px-3 tracking-wide font-extrabold rounded-full bg-zinc-100 border border-zinc-300 shadow-md text-[14px] text-black ml-[220px]'
            el.innerText = '$' + marker.properties.price

            // 将标记添加到地图实例
            new mapboxgl.Marker(el).setLngLat(marker.geometry.coordinates).addTo(map.current)
        }

        map.current.fitBounds(bbox, { padding: 100 })
    })

    return <div ref={mapContainer} className='w-full h-screen' />
}

线上复现地址：https://mapbox-tests.vercel.app/

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