如何在Mapbox GL JS中停止在Zoom上移动标记

Question

我已经尝试了以前的答案，但没有成功。

在初始负载上，自定义标记处于正确的位置，尽管我确实必须以220px向右移动它们以实现这一目标。由于我们使用的fitbounds，在下一段中描述了缩放级别设置。

在放大或缩放时，标记会失去位置 - 它们的位置仅适用于一定的缩放水平。我正在使用草皮。JSBbox来计算我们可以在FitBounds功能中使用的边界框（尽管这有点不合时宜，因此必须将标记转移到右220px）。

在我的_app.js（next.js）中，我导入CSS

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

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

export default MyApp

这是我的地图组件，

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)

var 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] },
        },
    ],
}

var bbox = turf.bbox(geojson)

useEffect(() => {
    if (map.current) return // initialize map only once
    map.current = new mapboxgl.Map({
        container: mapContainer.current,
        style: 'mapbox://styles/mapbox/streets-v11',
    })

    for (const marker of geojson.features) {
        // Create a DOM element for each marker.
        const el = document.createElement('div')

        //? WE USE ml-[220px] AS THE MARKERS APPEAR 220PX TO THE LEFT OF WHERE THEY SHOULD BE
        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

        // Add markers to the map.
        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' />

可以找到一个示例

任何帮助将不胜感激。

Answer 1

在初始加载上，自定义标记处于正确的位置，尽管我确实必须手动向右移动220px才能实现这一目标。

这没有意义。如果您必须将它们移动220px，那么它们显然不在正确的位置。据推测，该点的经度是错误的，并且通过将其抵消220px暂时看起来正确 - 但是一旦变焦变化，它就会以不同的数量错误。

您需要：

• 获取正确的标记/朗格，
• 请确保您的标记图像不包含额外的空白空间
• 集 icon-andor 正确地为您的图像设计