Mapbox GL-我的基本默认标记不会显示在地图上 [英] Mapbox GL - my basic, default marker won´t show up on the map

问题描述

最近，我开始摆弄MapBox，现在，我正在尝试将标记添加到地图.并不像看起来那么容易.我正在尝试添加基本的默认标记，并直接从"Mapbox GL"参考指南.不过，它不会显示.

lately, I started fiddling with MapBox and right now, I am trying to add the marker to the map. Not as easy as it seems. I am trying to add basic, default marker with code copypasted straight out of "Mapbox GL" reference guide. Still, it won´t show up.

这是我使用的代码，这简直无法实现...

This is the code I use, it cant get simpler that this...

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

有人知道为什么它不起作用吗?整个不可行方案"可以在 http://www.caucasus-trekking.com/上看到地图/地图

Does anybody have an idea why it doesnt work? Whole "not working scenario" can be seen at http://www.caucasus-trekking.com/Maps/map

具体来说，我想使用该经典标记，其顶部为圆形，底部为尖头.这样的代码- https://www.mapbox.com/help/img/android/marker-example.png

Specifically, I would like to use that classic marker, round at the top and pointy at the bottom. Somjething like this - https://www.mapbox.com/help/img/android/marker-example.png

Mapbox中是否存在一些默认形状，还是应该由我自己的CSS文件创建它?

Wasnt there some default shape in Mapbox or should I create it by my own css file?

非常感谢

推荐答案

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

Somewhat strangely, it appears that the answer is that the Marker is being drawn, but there is no styling included in mapbox-gl.css to actually make it visible. It's just an invisible div.

因此您需要添加一些CSS:

So you need to add some CSS:

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

请参阅codepen: https://codepen.io/stevebennett/pen/VpPbbM

See codepen: https://codepen.io/stevebennett/pen/VpPbbM

这篇关于Mapbox GL-我的基本默认标记不会显示在地图上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！