Mapbox GL - 我的基本默认标记不会显示在地图上

Question

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

这是我使用的代码，再简单不过了...

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

有人知道为什么它不起作用吗？整个 "not working scenario" 可以在 http://www.caucasus-trekking.com/Maps/map

看到

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

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

非常感谢

Answer 1

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

所以你需要添加一些CSS:

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

参见代码笔：https://codepen.io/stevebennett/pen/VpPbbM

Answer 2

如果查看页面的源代码，您会发现标记已成功添加为空 <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);

在 this example 中查看此 c&p 代码的原始来源。

Answer 3

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

Mapbox GL - 我的基本默认标记不会显示在地图上

Mapbox GL - my basic, default marker won´t show up on the map

javascript

mapbox-gl

mapbox-gl-js

mapbox-marker