MapBox标记在缩放时移动

Question

MapBox标记在缩放时移动

18

我正在使用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>

这是 map-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。这可能是原因吗？如果不是，问题出在哪里？

谢谢

- Mahdi

6个回答

9

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

请注意，在使用npm时，这种问题有时会发生。确保库已完全下载并且是最新版本。

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

- Mahdi

我在环境中遇到了问题，因为我导入的Mapbox CSS与package.json中的mapbox-gl版本不匹配。所以请检查你的头部。类似这样：<script src='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' /> - heratyian

谢谢！我正在处理的代码库使用的是2018年发布的0.46.0版本。 - Paul J

我的错误是混淆了 react-mapbox-gl 版本和 mapbox-gl 版本。你需要使用 mapbox-gl 版本号。 - Throsby

3

我曾遇到过类似的问题，标记在缩放时似乎移动了位置，通过设置偏移量来解决了这个问题。在这里分享一下，希望能帮助其他人，以下是示例代码

// 将标记添加到地图中 var m = new mapboxgl.Marker(el, {offset: [0, -50/2]}); m.setLngLat(coordinates); m.addTo(map);

- smkhan

为了使用您的解决方案，我不得不更新我的Mapbox，就像被接受的答案中所解释的那样。然后我使用了您的代码。您的解决方案帮了我大忙，谢谢 <3 - Farhad

0

在我的情况下，我使用的 SVG 文件周围有一些空白区域。这样看起来就像标记在移动。一个简单的解决方法是去掉内容周围的空白（例如使用 Inkscape 的“调整页面大小到绘图或选择”选项：https://graphicdesign.stackexchange.com/a/21638）。

此外，重要的是在 SVG 标记上设置 display: block。请参见：https://dev59.com/3lkS5IYBdhLWcg3wiXQj#39716426。

- Jonathan

0

这是因为你的代码中没有导入样式。只需在 index.html 的 head 标签中添加此行即可。

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

- Nirav Ghodadra

0

（使用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>

- Joel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fernando Casaliba Perlangeli · Accepted Answer

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

导入CSS对我有效。