3

最近，我开始摆弄 MapBox，现在，我正在尝试将标记添加到地图中。不像看起来那么容易。我正在尝试使用直接从“Mapbox GL”参考指南中复制粘贴的代码添加基本的默认标记。不过，它不会出现。

这是我使用的代码，它不能变得更简单......

var marker = new mapboxgl.Marker().setLngLat([45.702117, 42.395926]).addTo(map);

有人知道为什么它不起作用吗？整个“不工作场景”可以在http://www.caucasus-trekking.com/Maps/map看到

编辑：具体来说，我想使用那个经典的标记，顶部是圆形的，底部是尖的。Somjething 像这样 - https://www.mapbox.com/help/img/android/marker-example.png

Mapbox 中没有一些默认形状，还是我应该通过自己的 css 文件创建它？

非常感谢

4

3 回答 3

5

有点奇怪，答案似乎是正在绘制标记，但 mapbox-gl.css 中没有包含任何样式以使其实际可见。它只是一个不可见的 div。

所以你需要添加一些CSS：

.mapboxgl-marker {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border:1px solid gray;
    background-color:lightblue;
}

见codepen：https ://codepen.io/stevebennett/pen/VpPbbM

于 2017-03-08T22:48:03.117 回答
3

如果您查看页面的源代码，您会看到标记已成功添加为空<div class="mapbox-gl-marker" ...></div>。是的，这里没什么可看的，但这是默认方式。

给那个标记一些爱，给它一些风格。

var el = document.createElement('div');                                       
el.style.backgroundImage = 'url(https://placekitten.com/g/50/)';              
el.style.width = '50px';                                                      
el.style.height = '50px';
el.style.borderRadius = '50%';                                                     
new mapboxgl.Marker(el).setLngLat([45.702117, 42.395926]).addTo(map);

请参阅此示例中此 c&p 代码的原始来源。

于 2017-03-08T23:12:19.220 回答
0

仔细阅读文档后，我意识到发生此问题是因为我们没有导入mapbox-js.css文件。请阅读文档以了解如何添加它https://docs.mapbox.com/mapbox-gl-js/guides/install/#quickstart。

于 2021-08-14T09:02:44.780 回答