欢迎光临散文网 会员登陆 & 注册

mapbox-gl开发教程(十六):弹出气泡

2023-03-01 09:29 作者:地理信息技术杂谈  | 我要投稿

--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的样式效果,也能够达到气泡的效果,这个可以尝试。

mapbox-gl开发教程(十六):弹出气泡的评论 (共 条)

分享到微博请遵守国家法律