mapbox-gl开发教程(十六):弹出气泡
--mapbox-gl是一个开源、基于webgl技术的前端地图类库--
开发教程篇十六:弹出气泡
弹出气泡是一种常用的展示地图要素信息方式,通过鼠标或者其他指令操作,显示地图上要素的详细信息,在地图位置变换时,跟随地图要素进行移动。
mapbox-gl通过提供Popup组件,实现在地图进行弹出气泡的显示。
一个简单的弹出气泡示例:
new mapboxgl.Popup().setLngLat([0, 0]).setHTML("<h1>信息</h1>").addTo(map);
-- 气泡的位置是根据坐标进行设置的,和地图上要素设置同一个坐标位置,即可达到气泡跟随效果;
-- 气泡中的内容,可以设置文本信息(setText)、html文本(setHTML),也可以设置为网页中的一个dom元素(setDOMContent);
-- 气泡的样式,通过编写CSS样式,设置className进行修改,不过修改的是气泡内部的样式,要修改整个气泡的外观,需要重写类库中自带的样式;
-- 气泡本身可以设置关闭按钮,或者其他的移动、点击等关闭方式,通过代码也能控制进行关闭;
气泡的相关属性说明参见以下文档:
https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup
mapbox-gl提供的marker,通过设置html的样式效果,也能够达到气泡的效果,这个可以尝试。