mapbox-gl提供了兩種在地圖上創(chuàng)建點(diǎn)數(shù)據(jù)的方式，一種是上一章講的符號(hào)圖層（symbol），另一種是本章講的marker，這兩種方式有各自的適用場(chǎng)景。

符號(hào)圖層（symbol）是以webgl的形式進(jìn)行創(chuàng)建加載，數(shù)據(jù)源是geojson或矢量切片，適合大規(guī)模的數(shù)據(jù)加載，同時(shí)數(shù)據(jù)顯示的樣式不能過于復(fù)雜；
marker是以html dom元素的形式進(jìn)行創(chuàng)建加載，數(shù)據(jù)源是坐標(biāo)點(diǎn)，加載的數(shù)據(jù)量不能太多，要不然會(huì)出現(xiàn)卡頓，不過，數(shù)據(jù)樣式很豐富，完全根據(jù)html中排版和css樣式進(jìn)行設(shè)計(jì)。

地圖上創(chuàng)建一個(gè)基礎(chǔ)的marker：

實(shí)現(xiàn)代碼：var?marker?=?new?mapboxgl.Marker().setLngLat([30.5,?50.5]).addTo(map);

通過設(shè)置marker的element屬性，可以設(shè)置自定義的html元素，從頁(yè)面文檔中選取，或者通過createElement進(jìn)行元素創(chuàng)建：

var?el?=?document.createElement('div');el.className?=?'marker';

開發(fā)時(shí)，過瀏覽的開發(fā)調(diào)試，可以發(fā)現(xiàn)在頁(yè)面上加載了一個(gè)html元素，在地圖移動(dòng)時(shí)，通過css中的translate rotate等變換參數(shù)進(jìn)行變化，達(dá)到跟隨地圖相應(yīng)的坐標(biāo)點(diǎn)。

marker的關(guān)鍵屬性說明：

options.anchor：錨點(diǎn)位置，marker整個(gè)dom和地圖上坐標(biāo)點(diǎn)對(duì)齊的方式；

options.draggable：是否可以拖拽，設(shè)置為true時(shí)，marker能夠隨著鼠標(biāo)在地圖上拖拽移動(dòng)；

options.offset：marker和地圖上坐標(biāo)點(diǎn)的像素偏移量；

marker的api說明：
https://docs.mapbox.com/mapbox-gl-js/api/markers/#marker

mapbox-gl開發(fā)是講述如何從基礎(chǔ)到實(shí)際應(yīng)用進(jìn)行地圖開發(fā)的教程，不定時(shí)進(jìn)行持續(xù)進(jìn)行更新，如有疑問，公眾號(hào)留言進(jìn)行討論。
mapbox-gl官網(wǎng)地址：

https://docs.mapbox.com/mapbox-gl-js/guides/