将高德坐标拾取工具放入Element UI 对话框

最新推荐文章于 2025-04-03 14:12:54 发布
最新推荐文章于 2025-04-03 14:12:54 发布
阅读量5k 收藏 4
点赞数 1
分类专栏： Vue项目实践
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/shuaizi96/article/details/77103569
版权
在创建使用Element UI的坐标拾取页面时，发现地图无法在对话框内显示。通过研究发现，问题在于对话框的v-if指令导致地图未正确初始化。解决方案是使用Vue的watch监听对话框状态，在内容渲染后初始化地图，从而成功集成高德坐标拾取工具。此外，还需调整高德下拉框的z-index以避免被对话框覆盖。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在使用Element UI制作坐标拾取页面时我遇到一个问题：被包裹在对话框组件中的地图无法显示，而写在普通页面的地图则没有这种问题

坐标拾取是借用了高德地图的工具：http://lbs.amap.com/api/javascript-api/example/map/click-to-get-lnglat

想要实现的效果是点击经纬度输入框
这里写图片描述
弹出一个对话框，里面放坐标拾取工具
这里写图片描述

选择好坐标后点击确认，关闭对话框，并将拿到的经纬度数据放到经纬度输入框里（截图里坐标出现差异请自行忽略。。。）

最低0.47元/天 解锁文章
高德地图坐标拾取组件
仰望星空的代码
01-18 4418
// 高德地图坐标拾取 param point 位置展示 如'114.424314,30.606697' getPoint选择位置返回坐标字符串 <template> <div class="map-wrapper"> <div :id="id" class="container"> <div v-show="isShow" class="info"> <input id="tipInput" type="tex.
地图矢量下载器简介
diehan6119的博客
03-28 2584
一、软件简介 地图矢量下载工具是由GIS大师兄团队推出的一款矢量下载软件，该软件主要用来下载互联网地图矢量数据，包括高德地图POI、楼宇、道路和路况。以及百度地图POI、道路和建筑、地铁、谷歌地图POI数据。下载结果直接输出shapefile格式数据。软件整体界面如下图： 二、软件版本 软件提供免费版和全功能版本，两个版本之间的区别主要有以下几点 ...
高德地图坐标拾取器
07-14
高德地图的坐标拾取系统
高德坐标拾取器
weixin_34336526的博客
06-18 2725
页面效果 应用场景：你需要在一个弹窗中拾取一个高德的地址坐标。 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; 5 &lt;titl
基于高德地图+elementUi制作的自定义工作工具栏
最新发布
进击的疯菟的博客
04-03 222
基于高德地图+elementUi制作的自定义工作菜单栏，功能包含测距、测面积、全屏、说明、搜索等（二次开发）。
高德坐标拾取器.rar
05-27
高德坐标拾取器,里面有几个本来是想找个现在的自己用但是发现都不是我想要的,里面的修改版amap.html是我在原来文件基础上修改的.
高德地图坐标拾取器1.rar
02-04
高德地图坐标拾取器1
高德地图坐标拾取、带参进入定位坐标
10-12
高德地图作为一款广泛使用的地图API，提供了丰富的功能，包括坐标拾取、带参进入定位等功能。下面将详细解释这些知识点。 1. **坐标拾取**： 坐标拾取是指用户在地图上选择一个特定的位置时，系统能够获取到这个...
vue使用elementui结合高德地图的定位以及位置显示
11-25
里面包含了elementui结合高德地图的定位已经位置标记相关的资料，里面的定位组件下载就可使用，包含组件和说明文档。
vue/react高德地图选点组件（坐标拾取工具）
cs12558的博客
11-27 2410
vue/react高德地图选点组件（坐标拾取工具）
百度地图坐标拾取器（可转换为高德坐标）
07-31
百度坐标拾取并可自动转换为高德坐标工具，程序有交期到2020年1月1日，支持每分钟最多2万次高德坐标转换。
地图坐标拾取器(转换为高德坐标).rar
09-04
软件介绍: 本工具能够将BD地图坐标实时转换为高德地图坐标，由于高德坐标是由BD坐标使用高德官方接口转换而成，由于官方坐标转换准确及稳定性存在问题，因此定位可能存在一定的偏差，建议打开程序前将屏幕分辨率调至1024x768或者更高。可搜索地址搜索坐标位置。
vue使用高德地图获取地理坐标信息
06-11
vue使用高德地图获取地理坐标信息
vue+elementUI高德地图-区域定位.rar 定位到用户在区县级地区的大致方位
09-05
vue+elementUI高德地图-区域定位.rar 定位到用户在区县级地区的大致方位 用户 可手动发起定位 后端可接收用户定位经纬度数据
lng_lat_pick_up:基于高德地图的经纬度拾取工具
04-27
经纬度获取工具 介绍 使用高德地图制作，用于获取某个点的经纬度或者某个区域的经纬度 使用说明 在获取Web端(JS API)和Web服务两个key，前者用于地图渲染等，后者用于根据关键字查询经纬度 将public/index.html的your_key替换为Web端key 将src/index.js的your_key替换为Web服务key。 运行项目 yarn yarn start 注：编辑区域时，多边形会显示可编辑点。其中不透明点为实际结点，鼠标左键单击该类节点可进行删除操作；半透明点为虚拟节点，单击该类节点将为多边形新增结点；实际结点和虚拟节点均可进行拖动操作，以改变多边形的形状。
高德地图根据关键词坐标拾取小工具
weixin_34200628的博客
09-26 696
今天早上在写代码的时候，需要用到地图坐标拾取工具，我们用的是搞的地图，在高德地图API官方网站中没有找到相关的坐标拾取工具。在网上找到这么个小工具，与大家分享下！ CSS 1 html { background-color: #fff; } 2 body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd,...
高德地图信息弹窗使用element ui 组件
Tycheseww的博客
03-15 1252
在项目中，使用高德地图的API，有需求是在点击marker标记的时候，需要弹出windowInfo弹窗，然后弹窗中还有自定义样式、操作等。使用Vue.extend 、vm.$el 把弹窗内容写成一个组件加入到windowInfo中，弹窗方法和内容都可以写在组件中。直接使用InfoWindow的content连接一组字符串，如果样式和操作复杂，写起来费劲不说，还很容易出bug。解决：在vue.config.js中配置runtimeCompiler为true。注：组件内不能使用全局注册的组件，必须单独引入。
高德地图坐标查询工具——JavaScript
chelen_jak的专栏
09-24 5256
原文出处：http://www.2cto.com/kf/201311/260807.html 最近需要查询高德地图上某个地点的坐标，但是苦于高德地图没有提供这样的功能。幸运的是，高德地图提供了javascript的api，于是打算自己写一个查询坐标的工具，在这里分享给大家。   代码如下：     ? 1 2 3 4 5
vue2高德地图坐标拾取
01-03
### 集成高德地图API实现坐标拾取功能 为了在Vue2项目中集成高德地图并实现坐标拾取功能，需先完成前置准备工作。这包括引入必要的依赖项以及配置环境设置[^1]。 #### 安装与配置 安装`vue-amap`插件来简化操作流程： ```bash npm install vue-amap --save ``` 接着，在项目的入口文件(main.js)里注册该组件库，并初始化相关参数： ```javascript import Vue from 'vue'; import VueAmap from 'vue-amap'; // 初始化vue-amap. Vue.use(VueAmap); // 设置高德地图key. VueAmap.initAMapApiLoader({ key: '你的Key', v: '1.4.15', // 版本号, }); ``` #### 页面布局设计 创建用于展示地图的容器结构，定义好样式以便更好地显示效果: ```html <div id="app"> <div class="amap-wrapper"> <!-- 地图容器 --> <el-amap vid="amapDemo" :zoom="zoom" :center="center"></el-amap> </div> <!-- 显示选中的经纬度 --> <p>经度：{{ lng }}</p> <p>纬度：{{ lat }}</p> </div> ``` 这里使用了Element UI框架下的`<el-amap>`标签作为地图承载区域；同时通过两个变量(`lng`, `lat`)动态绑定到视图上实时更新所选取的位置信息[^3]。 #### JavaScript逻辑编写 最后一步是在JavaScript部分处理交互事件，监听用户的鼠标单击动作从而捕获当前光标的地理坐标位置： ```javascript export default { data() { return { zoom: 10, // 初始缩放比例 center: [116.397428, 39.90923], // 默认中心点 lng: null, // 经度 lat: null, // 纬度 events: { click(e) { this.lng = e.lnglat.lng; this.lat = e.lnglat.lat; }, }, }; }, }; ``` 上述代码片段展示了如何利用回调函数机制响应来自地图控件触发的时间流，进而达到获取具体坐标的目[^2]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值