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 

本文分享自微信公众号 - 技术几句杂谈（tecsimplepoint）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

来源：oschina

链接：https://my.oschina.net/u/4599572/blog/4573524