地圖開發(fā)中，彈出氣泡的功能也是經常使用到的，顯示poi的詳細信息，加載一些多媒體的信息，同時，氣泡跟隨對應poi的位置進行移動。

mapbox-gl有對應的彈出氣泡實現：Popup，通過初始化氣泡對象就能夠實現氣泡的效果。

氣泡通過setLngLat設置氣泡在地圖上的位置，這樣才能隨著地圖移動而進行變化。

點擊一個poi，顯示氣泡的效果：

map.on('click',?'places',?function?(e)?{

//獲取點擊對象的坐標信息

var?coordinates?=?e.features[0].geometry.coordinates.slice();

//氣泡的內容放在圖層源數據的屬性中

var?description?=?e.features[0].properties.description;?

//添加氣泡到地圖上

new?mapboxgl.Popup()

.setLngLat(coordinates)

.setHTML(description)

.addTo(map);

});

鼠標移動到對象上，顯示氣泡的事件：

map.on('mouseenter', 'places', function (e) {});

鼠標移出對象，刪除氣泡的事件：

map.on('mouseleave', 'places', function () {});

mapbox-gl中使用Marker的時候，可以在Marker上關聯(lián)一個氣泡的信息，在Marker上點擊，就能夠實現彈出氣泡的效果，相關代碼：

? ? ?new?mapboxgl.Marker(el)

? ? .setLngLat(monument)

? ? .setPopup(popup)

? ? .addTo(map);

氣泡中的內容可以使用文本，也能夠使用帶樣式的html內容。
氣泡的外邊框樣式，需要重寫默認的mapbox-gl自帶的氣泡樣式，設置背景等效果，這個在chrome調試樣式時，能夠看到，其中涉及到的關鍵css名稱有：

.mapboxgl-popup-content

.mapboxgl-popup-close-button?