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 - 我的基本默認標記不會在地圖上顯示

回答

相關問題