--mapbox-gl是一個(gè)開(kāi)源、基于webgl技術(shù)的前端地圖類庫(kù)--

開(kāi)發(fā)教程篇十六：彈出氣泡

彈出氣泡是一種常用的展示地圖要素信息方式，通過(guò)鼠標(biāo)或者其他指令操作，顯示地圖上要素的詳細(xì)信息，在地圖位置變換時(shí)，跟隨地圖要素進(jìn)行移動(dòng)。

mapbox-gl通過(guò)提供Popup組件，實(shí)現(xiàn)在地圖進(jìn)行彈出氣泡的顯示。
一個(gè)簡(jiǎn)單的彈出氣泡示例：
new mapboxgl.Popup().setLngLat([0, 0]).setHTML("<h1>信息</h1>").addTo(map);

-- 氣泡的位置是根據(jù)坐標(biāo)進(jìn)行設(shè)置的，和地圖上要素設(shè)置同一個(gè)坐標(biāo)位置，即可達(dá)到氣泡跟隨效果；

-- 氣泡中的內(nèi)容，可以設(shè)置文本信息（setText）、html文本（setHTML），也可以設(shè)置為網(wǎng)頁(yè)中的一個(gè)dom元素（setDOMContent）；

-- 氣泡的樣式，通過(guò)編寫(xiě)CSS樣式，設(shè)置className進(jìn)行修改，不過(guò)修改的是氣泡內(nèi)部的樣式，要修改整個(gè)氣泡的外觀，需要重寫(xiě)類庫(kù)中自帶的樣式；

-- 氣泡本身可以設(shè)置關(guān)閉按鈕，或者其他的移動(dòng)、點(diǎn)擊等關(guān)閉方式，通過(guò)代碼也能控制進(jìn)行關(guān)閉；

氣泡的相關(guān)屬性說(shuō)明參見(jiàn)以下文檔：

https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup
mapbox-gl提供的marker，通過(guò)設(shè)置html的樣式效果，也能夠達(dá)到氣泡的效果，這個(gè)可以嘗試。