mapbox-gl：弹出气泡

地图开发中，弹出气泡的功能也是经常使用到的，显示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上关联一个气泡的信息，在Marker上点击，就能够实现弹出气泡的效果，相关代码：
     new mapboxgl.Marker(el)
    .setLngLat(monument)
    .setPopup(popup)
    .addTo(map);

气泡中的内容可以使用文本，也能够使用带样式的html内容。
气泡的外边框样式，需要重写默认的mapbox-gl自带的气泡样式，设置背景等效果，这个在chrome调试样式时，能够看到，其中涉及到的关键css名称有：

.mapboxgl-popup-content
.mapboxgl-popup-close-button 

更多文章，请关注公众号查看！