--mapbox-gl是一个开源、基于webgl技术的前端地图类库--

开发教程篇十六：弹出气泡

弹出气泡是一种常用的展示地图要素信息方式，通过鼠标或者其他指令操作，显示地图上要素的详细信息，在地图位置变换时，跟随地图要素进行移动。

mapbox-gl通过提供Popup组件，实现在地图进行弹出气泡的显示。 一个简单的弹出气泡示例： new mapboxgl.Popup().setLngLat([0, 0]).setHTML("<h1>信息</h1>&#​34;).addTo(map);

-- 气泡的位置是根据坐标进行设置的，和地图上要素设置同一个坐标位置，即可达到气泡跟随效果；

-- 气泡中的内容，可以设置文本信息（setText）、html文本（setHTML），也可以设置为网页中的一个dom元素（setDOMContent）；

-- 气泡的样式，通过编写CSS样式，设置className进行修改，不过修改的是气泡内部的样式，要修改整个气泡的外观，需要重写类库中自带的样式；

-- 气泡本身可以设置关闭按钮，或者其他的移动、点击等关闭方式，通过代码也能控制进行关闭；

气泡的相关属性说明参见以下文档：

https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup mapbox-gl提供的marker，通过设置html的样式效果，也能够达到气泡的效果，这个可以尝试。