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

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

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

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

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

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

最低0.47元/天 解锁文章
shuaizi96
关注
专栏目录
地图矢量下载器简介
diehan6119的博客
03-28 2423
一、软件简介 地图矢量下载工具是由GIS大师兄团队推出的一款矢量下载软件，该软件主要用来下载互联网地图矢量数据，包括高德地图POI、楼宇、道路和路况。以及百度地图POI、道路和建筑、地铁、谷歌地图POI数据。下载结果直接输出shapefile格式数据。软件整体界面如下图： 二、软件版本 软件提供免费版和全功能版本，两个版本之间的区别主要有以下几点 ...
高德地图坐标拾取器
07-14
高德地图的坐标拾取系统
高德坐标拾取器
weixin_34336526的博客
06-18 2580
页面效果 应用场景：你需要在一个弹窗中拾取一个高德的地址坐标。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <titl
vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能
最新发布
黄团团的个人博客
09-19 1082
Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能
高德坐标拾取器.rar
05-27
高德坐标拾取器,里面有几个本来是想找个现在的自己用但是发现都不是我想要的,里面的修改版amap.html是我在原来文件基础上修改的.
vue使用elementui结合高德地图的定位以及位置显示
11-25
里面包含了elementui结合高德地图的定位已经位置标记相关的资料，里面的定位组件下载就可使用，包含组件和说明文档。
高德地图坐标拾取、带参进入定位坐标
10-12
高德地图作为一款广泛使用的地图API，提供了丰富的功能，包括坐标拾取、带参进入定位等功能。下面将详细解释这些知识点。 1. **坐标拾取**： 坐标拾取是指用户在地图上选择一个特定的位置时，系统能够获取到这个...
高德地图坐标拾取器1.rar
02-04
高德地图坐标拾取器1
vue/react高德地图选点组件（坐标拾取工具）
cs12558的博客
11-27 2270
vue/react高德地图选点组件（坐标拾取工具）
高德地图坐标拾取组件
仰望星空的代码
01-18 4289
// 高德地图坐标拾取 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.
地图坐标拾取器(转换为高德坐标).rar
09-04
软件介绍: 本工具能够将BD地图坐标实时转换为高德地图坐标，由于高德坐标是由BD坐标使用高德官方接口转换而成，由于官方坐标转换准确及稳定性存在问题，因此定位可能存在一定的偏差，建议打开程序前将屏幕分辨率调至1024x768或者更高。可搜索地址搜索坐标位置。
vue使用高德地图获取地理坐标信息
06-11
vue使用高德地图获取地理坐标信息
百度地图坐标拾取器（可转换为高德坐标）
07-31
百度坐标拾取并可自动转换为高德坐标工具，程序有交期到2020年1月1日，支持每分钟最多2万次高德坐标转换。
vue+elementUI高德地图-区域定位.rar 定位到用户在区县级地区的大致方位
09-05
vue+elementUI高德地图-区域定位.rar 定位到用户在区县级地区的大致方位 用户 可手动发起定位 后端可接收用户定位经纬度数据
详解vue实现坐标拾取器功能示例
01-22
需求 1、搜索具体地址，自动填写经纬度，并在地图上标记 2、点击地图上一点，可重新填写经纬度并且标记 代码 在dom新建div渲染地图 <el label=店铺地址 prop=address> <el v-model=fristForm.address></el> <el class=long-lat v-model=fristForm.longitude placeholder=经度 ></el> <el-input class=long-lat v-model=fri
高德地图根据关键词坐标拾取小工具
weixin_34200628的博客
09-26 667
今天早上在写代码的时候，需要用到地图坐标拾取工具，我们用的是搞的地图，在高德地图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 1159
在项目中，使用高德地图的API，有需求是在点击marker标记的时候，需要弹出windowInfo弹窗，然后弹窗中还有自定义样式、操作等。使用Vue.extend 、vm.$el 把弹窗内容写成一个组件加入到windowInfo中，弹窗方法和内容都可以写在组件中。直接使用InfoWindow的content连接一组字符串，如果样式和操作复杂，写起来费劲不说，还很容易出bug。解决：在vue.config.js中配置runtimeCompiler为true。注：组件内不能使用全局注册的组件，必须单独引入。
高德地图坐标查询工具——JavaScript
chelen_jak的专栏
09-24 5092
原文出处：http://www.2cto.com/kf/201311/260807.html 最近需要查询高德地图上某个地点的坐标，但是苦于高德地图没有提供这样的功能。幸运的是，高德地图提供了javascript的api，于是打算自己写一个查询坐标的工具，在这里分享给大家。   代码如下：     ? 1 2 3 4 5
高德坐标拾取html,高德地图实现地址检索获取结果列表和坐标
06-12
您可以通过以下步骤来实现高德坐标拾取和地址检索： 1. 在高德地图开放平台申请开发者账号，并创建应用，获取API密钥。 2. 在需要使用地图的页面中引入高德地图JavaScript API库文件。 ```html 您的密钥&plugin...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值