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

最近，我开始摆弄MapBox，现在我试图将标记添加到地图。并不像看起来那么容易。我试图添加基本，默认标记与代码copypasted直出"Mapbox GL" reference guide。不过，它不会出现。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文件创建它？

非常感谢

来源

2017-03-08 Jozef

有些奇怪的是，它看来，答案是标记正在绘制，但没有包括在mapbox-gl.css造型实际上使其可见。这只是一个无形的分隔。

所以，你需要添加一些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-08 22:48:03

谢谢，这是有道理的。我刚刚添加了对“https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css”的引用，并认为它包含一些默认对象。所以我应该下载并编辑本地的CSS，对吧？具体而言，我想使用那个classis“tear”标记，顶部圆点，底部尖尖。认为这是mapbox的默认标记。 – Jozef

我不会编辑它。我会创建自己的样式表并加载。据我所知，目前没有默认的泪滴标记样式。 –

如果你看看你的页面的源代码，你会看到标记被成功添加为空<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码中this example原始源。

来源

2017-03-08 23:12:19 sgelb

谢谢，明白了。我以前看过那个例子，但没有使用它，因为我想要那个经典的标记，顶部圆形，底部尖尖。我是否必须通过css专门设计它？认为这是Mapbox的默认形状。 – Jozef

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

回答

相关问题