3、Vue3.0实现一个简单的气泡弹窗.png
Overlay是要在地图上显示并附加到单个地图位置的元素。像一样module:ol/control/Control~Control
,叠加层是可见的小部件。与“控件”不同,它们不在屏幕上的固定位置,而是绑定到地理坐标,因此平移地图将移动“叠加层”,但不会移动“控件”。
var overlay = new Overlay({ element: popupContainer.value, autoPan: true, autoPanAnimation: { duration: 250, }, });
点击地图获取到屏幕坐标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; });
本文链接:https://www.123wz.cn/post/58481.html
版权声明:
温馨提示:
本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
上一篇:关于BFC的整理
下一篇:Vuex 入门及详解
还没有评论,快来说点什么吧~