MapBox 标记在缩放时移动

Answer 1

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

添加 import css 对我有用。

Answer 2

我找到了解决方案并在这里与遇到此问题的其他人分享。该问题是由于使用了不是最新版本的库而引起的。升级到最新版本后，我可以解决这个问题。

请注意，当您使用 npm 时，有时会出现此类问题。确保库已完全下载并且是最新版本。

MapBox 的最新版本可以在这里找到。

Answer 3

有类似的问题，标记似乎在放大/缩小时改变了位置，通过设置偏移来修复它，想分享它是否可以帮助其他人，这里是fiddle

// add marker to map
    var m = new mapboxgl.Marker(el, {offset: [0, -50/2]});
    m.setLngLat(coordinates);
    m.addTo(map);

Answer 4

（使用mapbox 1.13.0）

我遇到了类似的问题，弹出窗口没有显示，并且会根据缩放更改位置。

Mapbox 官方声明您需要包含 css 文件才能使标记和弹出窗口按预期工作。 https://docs.mapbox.com/mapbox-gl-js/guides/install/

但是，您也可以将该 css 直接复制到组件中并将其用作元素。例如：

export default function MarkerMapTest(props) {
const mapContainer = React.useRef(null)
const map = React.useRef(null)
const elemRef = React.useRef(null)

React.useEffect(() => {
    map.current = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/dark-v10",
        center: [151.242, -33.9132],
        zoom: 14,
    })

    const marker = new mapboxgl.Marker({
        element: elemRef.current,
    })
        .setLngLat([151.242, -33.9132])
        .addTo(map.current)
}, [])

return (
    <div
        style={{ width: 600, height: 600, backgroundColor: "gray" }}
        ref={mapContainer}
    >
        <div
            style={{
                width: 30,
                height: 30,
                borderRadius: 15,
                backgroundColor: "red",
                position: "absolute", // !
                top: 0, // !
                left: 0, // !
            }}
            ref={elemRef}
        />
    </div>

Answer 5

就我而言，我使用的 svg 在实际内容周围有一些空间。这样我就感觉标记在移动。一个简单的修复方法是删除内容周围的空间（例如，使用 inkscape 的“根据绘图或选择调整页面大小”选项：https://graphicdesign.stackexchange.com/a/21638）

在 svg 标记上设置

display: block

也很重要。请参阅：https://stackoverflow.com/a/39716426/11603006

Answer 6

这是因为样式未导入到您的代码中。只需在 index.html

的 head 标签中添加这一行

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.4.1/mapbox-gl.css' rel='stylesheet' />

Answer 7

如果有人遇到这个错误，请尝试在顶部添加 CDN，这就是我修复我的问题的方法，它的工作原理就像一个魅力