Vue3.0 实现一个简单的气泡弹窗
原创
一、Map
Map是OpenLayers的核心组件。要渲染地图需要一个View，一个或多个layers以及一个目标容器target。
二、定义Overlay
Overlay是要在地图上显示并附加到单个地图位置的元素。像一样module:ol/control/Control~Control，叠加层是可见的小部件。与“控件”不同，它们不在屏幕上的固定位置，而是绑定到地理坐标，因此平移地图将移动“叠加层”，但不会移动“控件”。
var overlay = new Overlay({
element: popupContainer.value,
autoPan: true,
autoPanAnimation: {
duration: 250,
},
});三、添加Overlay
点击地图获取到屏幕坐标e.coordinate，通过 toLonLat将屏幕坐标转换成地理坐标，然后将地理坐标与Overlay绑定，并添加到Map上面。
map.on("singleclick", function (e) {
let coordinate = toLonLat(e.coordinate);
popupContent.value.innerHTML =
"<p style='font-size:14px;font-weight:bold;'>关注星星编程微信公众号</p><p style='font-size:12px;margin-top:10px;text-align: left;'>当前经度：" +
coordinate[0] +
"</p>" +
"<p style='font-size:12px;text-align: left;'>当前纬度：" +
coordinate[1] +
"</p>";
overlay.setPosition(e.coordinate);
map.addOverlay(overlay);
});四、关闭弹窗
将Overlay绑定的地理坐标置为undefined，popupCloser Dom元素失去焦点，从而达到关闭弹窗的效果。
popupCloser.value.addEventListener("click", function () {
overlay.setPosition(undefined);
popupCloser.value.blur();
return false;
});原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
