MapBox 标记在缩放时移动

Question

我正在处理 MapBoxgl，我想添加几个标记。

这是我的 index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
        <link href=" /assets/css/bootstrap.min.css " rel="stylesheet" />
        <link href=" /assets/css/mapbox-gl.css " rel="stylesheet" />
        <link href=" /assets/css/main.css " rel="stylesheet" />
</head>
<body>
        <div id="map"></div>

<script src="/assets/js/mapbox-gl.js"></script>
<script src="/assets/js/map-style.js"></script>

</body>
</html>

这是地图-style.js:

var map = new mapboxgl.Map({
  container: 'map',
  center: [57.3221, 33.5928],
  zoom: 5,
  style: style
});


var geojson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
geometry: {
  type: 'Point',
coordinates: [30.61, 46.28]
},
properties: {
  title: 'point 1',
  description: 'point 1 Description',
  message: 'point1',
  iconSize: [25, 25]
}
},
{
type: 'Feature',
geometry: {
  type: 'Point',
coordinates: [30.62, 46.2845]
},
properties: {
  title: 'point 2',
  description: 'point 2 Description',
  message: 'point 2',
  iconSize: [25, 25]
 }
  }]
};

map.on('load', function () {
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
var el = document.createElement('div');
el.className = 'markers';
el.style.backgroundImage = 'url(assets/marker-azure.png)';
//el.style.width = marker.properties.iconSize[0] + 'px';
el.style.height = marker.properties.iconSize[1] + 'px';

el.addEventListener('click', function() {
    window.alert(marker.properties.message);
});

// add marker to map
new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});
});

下面是main.css与地图和标记相关的部分：

#map { position:absolute; top:0; bottom:0; width:100% }

.markers {
    display: absolute;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
}

所以，我的问题是，当我向标记添加宽度属性时，它们的图标显示正确（有点拉伸）但它们的坐标错误并在缩放时移动，如下图所示：

另一方面，如果宽度属性被消除，它们在正确的位置并且不会在缩放时移动，但它们被拉伸得很长，实际上和屏幕一样宽（下图）：

值得注意的是我用过bootstrap。会不会是这个原因？如果不是，是什么问题？

谢谢

Answer 1

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

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

可以在 here.

找到最新版本的 MapBox

Answer 2

有类似的问题，标记似乎在缩放时改变了位置 in/out，通过设置偏移修复它，如果它可以帮助其他人认为分享，这里是 fiddle

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

Answer 3

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

添加导入 css 对我有用。

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 在真实内容周围有一些 space。那样的话，我觉得标记在移动。一个简单的修复是删除内容周围的 space（例如，使用 inkscape 的“将页面调整为绘图或选择”选项：https://graphicdesign.stackexchange.com/a/21638）

在 svg-marker 上设置 display: block 也很重要。参见：

MapBox 标记在缩放时移动

MapBox markers Move on zooming

marker

mapbox

mapbox-gl-js