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>

这是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属性添加到标记时，它们的图标会正确显示（有点拉伸）但是它们的坐标位置错误并且在缩放时移动，如下图所示：

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

值得注意的是，我使用过bootstrap。可能是这个原因吗？如果没有，问题是什么？

由于

Answer 1

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

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

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

Answer 2

有类似的问题，标记似乎在放大/缩小时改变了位置，通过设置偏移量进行了固定，认为可以共享，如果可以帮助其他人，这里是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 对我有用。

MapBox标记继续缩放

3 个答案: