123资源网

3、Vue3.0 实现一个简单的气泡弹窗

广告也精彩

3、Vue3.0实现一个简单的气泡弹窗.png

二、定义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元素失去焦点,从而达到关闭弹窗的效果。

3、Vue3.0 实现一个简单的气泡弹窗

     popupCloser.value.addEventListener("click", function () {         overlay.setPosition(undefined);         popupCloser.value.blur();         return false;       }); 

3、Vue3.0 实现一个简单的气泡弹窗

3、Vue3.0 实现一个简单的气泡弹窗

广告也精彩

本文链接:https://www.123wz.cn/post/58481.html

版权声明:
温馨提示:
本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

发表评论

您需要 登录账户 后才能发表评论

还没有评论,快来说点什么吧~

联系客服
网站客服业务合作Q交流群
635140321
公众号
公众号
公众号
返回顶部