MapBox 标记继续缩放答案

【问题标题】：MapBox markers Move on zoomingMapBox 标记继续缩放
【发布时间】：2018-04-13 08:40:56
【问题描述】：

我正在研究 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;
}

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

另一方面，如果消除了 width 属性，它们在正确的位置并且不会在缩放时移动，但它们非常拉伸并且实际上与屏幕一样宽（下图）：

值得注意的是，我使用了引导程序。会不会是这个原因？如果不是，有什么问题？

谢谢

【问题讨论】：

标签： mapbox marker mapbox-gl-js

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

添加 import css 对我有用。

【讨论】：

【解决方案3】：

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

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

【讨论】：

要使用您的解决方案，我必须更新我的 Mapbox，就像它在接受的答案中的解释一样。然后我使用了你的代码。您的解决方案救了我，谢谢

【解决方案4】：

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

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

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

【讨论】：

我在我的环境中被绊倒了，因为我导入的 mapbox css 与 package.json 中的 mapbox-gl 版本不匹配。所以检查你的头。像这样
谢谢！我正在开发的代码库使用的是 2018 年发布的 0.46.0。