首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vite + Vue3 + OpenLayers 弹窗

二、开发环境 Vite + Vue3 + ol6 # 1、使用 Vite 创建项目;取个好听的项目名;拉取 vue 的代码模板 npm init vite@latest # 2、初始化项目 cd...you-project npm install # 3、安装 ol npm i ol -S # 4、启动项目 npm run dev 使用 Vite 初始化项目并安装 ol ,更详细做法可以查看...『Vite + Vue3 + OpenLayers 起步』 三、思路与编码 思路 初始化地图 地图点击事件,并获取当前点击的坐标位置 弹出窗口 初始化地图 初始化地图详细操作可以查看 『Vite +...Vue3 + OpenLayers 起步』 要初始化地图,首先需要引入 ol 提供的基础服务 还需要一个地图容器(我使用的是一个 div 标签) 然后通过 ol 提供的方法绑定这个容器 配置基础参数,渲染地图...“获取到的坐标位置来定位弹窗出现的位置 本例使用了 ol 提供的方法,把 弹窗容器 放入 ol的“覆盖物”’ 中管理。

1.6K21
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用 CSS3 transform 实现弹窗绝对居中

    后台的各种弹窗都是使用 Thickbox 实现的。...Thickbox 弹窗绝对居中的问题 但是 Thickbox 的弹窗有个问题,为了实现弹窗在页面中绝对居中,需要预先定义弹窗的高度,这是因为 Thickbox 弹窗居中是基于其宽度和高度来计算的,所以需要预先知道弹窗的高度...,然后在要设置弹窗的 margin-left 和 margin-top 为宽度和高度的一半的负值,意思反向移动弹窗的一半,这样刚好居中。...使用 CSS3 transform 实现绝对居中 哈哈,我写了几百行的 JS 代码实现了弹窗绝对居中,为了实现含有图片的弹窗也能撑开,我加了一秒的演示,还做了动画,总之自己觉得自己都棒棒哒,作为一个后端程序员...于是我拿去给前端的大神碟总演示,他看了一眼,说用 CSS 几行就能搞定,真的是猛汉流泪,CSS3 新增了 transform 2D/3D 转换的属性,我们无需知道弹窗的宽度和高度就能实现绝对居中,那么我们只需要定义一下弹窗的最大宽度和高度

    54720

    5分钟搞定vue3函数式弹窗

    如果每个页面都去手动导入弹窗组件,在点击按钮后弹出弹窗。再拿到弹窗返回的账号密码后去请求接口也太累了,那么有没有更简单的实现方式呢? 函数式弹窗的使用场景 首先我们来看看什么是函数式弹窗?...函数式弹窗是一种使用函数来创建弹窗的技术。它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了。那么这里使用函数式弹窗就能完美的解决我们的问题。...那么现在思路就清晰了,我们只需要将我们前面实现的弹窗组件作为第一个参数传递给createApp函数。第二个参数传入一个对象给弹窗组件的props,用以控制打开弹窗和注册弹窗关闭和确认的事件回调。...然后将创建的div元素挂载到body上面,再调用mount方法将我们的弹窗组件挂载到创建的div元素上,至此我们实现了通过函数式调用将弹窗组件渲染到body中。...调用createApp函数将步骤一的弹窗组件作为第一个参数传入,并且第二个对象参数中传入属性visible为true打开弹窗和注入弹窗close关闭和confirm确认的回调。

    39210
    领券