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

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

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

想要实现的效果是点击经纬度输入框

弹出一个对话框，里面放坐标拾取工具

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

但问题就出在：地图在对话框里无法显示
这是一个例子：https://jsfiddle.net/mw51L8mu/，可以看到对话框打开后是一片空白的

而且同样的代码，如果不写在对话框里，显示就没有问题：
https://jsfiddle.net/u1ghuhh5/

研究了很久，最后跑去看了element ui的源码，终于发现问题的原因：
<div class="el-dialog__body" v-if="rendered"><slot></slot></div>
可以看到，对话框里的内容由此div包裹，而这个div的显示或隐藏是使用了v-if指令，查阅vue官方文档，可以了解到v-if的特性：

这也就是说，当对话框未打开之前，我们写在钩子函数中的初始化地图的方法虽然执行了，但因为v-if绑定的状态为假，实际上地图并没有初始化成功，而当我们打开对话框，也就是将v-if渲染条件设为真的时候，mounted方法不会执行，所以对话框里装的只是一个没有经过高德构造函数渲染的普通div，那么我们看到的也就只会是一片空白了。

了解了原因，就找到解决办法了，可以用watch监测对话框显示状态的那个变量

watch:{Visible(curVal,oldVal){if(curVal==true){var map = new AMap.Map("container", {zoom: 9});let clickEventListener = map.on('click',           function(e) {document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()});let auto = new AMap.Autocomplete({input: "tipinput"});AMap.event.addListener(auto, "select", select);//注册监听，当选中某条记录时会触发function select(e) {if (e.poi && e.poi.location) {map.setZoom(15);map.setCenter(e.poi.location);}}}}},

这样在对话框里内容被成功渲染之后再初始化地图，就可以了。
然后将高德示例复制粘贴，坐标拾取工具就基本完成了。
最后有个小问题，因为高德给地区下拉选项设的z-index等级低于element ui对话框的（高德1024，element对话框2000多好像），这样会出现输入框输入地址，下拉框却在对话框后面无法点击的情况，所以在css里给下拉框z-index等级设高一点，就可以了

.amap-sug-result{z-index: 3000;
}

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

【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
一.如何进行标注 1.首先,我们需要找准标注的位置.比如,我想标注"中央民族大学"附近的网球场.那么,我转到坐标拾取工具页面,请点击http://openapi.baidu.com ...
【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍...
摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. -------------------------------------------------- ...
在线图片坐标拾取工具
在线图片坐标拾取工具在线图片坐标拾取工具图片位置坐标拾取,可以点击或直接复制图像,按CTRL+V加载图像,在图片上移动鼠标即可拾取图片当前位置的坐标,数据纯本地浏览器处理,不会上传到服务器,请放心 ...
element UI 对话框编辑取消事件，当前行会清空或者替换掉bug解决
问题:如题element UI 对话框编辑取消事件,当前行会清空或者被替换掉,table表格里的编辑按钮打开对话框,关闭对话框,this.$refs.ruleForm.resetFields()不生效 ...
element ui 对话框改模仿苹果手机预览视图
修改了一下 element ui的对话框做一个手机模拟预览的样式 <div class="look_box"><el-dial ...
【高德地图API】如何进行坐标转换？坐标拾取工具
2019独角兽企业重金招聘Python工程师标准>>> 一.坐标体系首先我们要明白,开发者能接触到哪些坐标体系呢? 第一种分类: 1. GPS,WGS-84,原始坐标体系.一般用 ...
vue/react高德地图选点组件（坐标拾取工具）
一些项目会常用到这个功能,把自己做的组件分享一下,vue版和react版都有 vue版 github地址 (vue3) react版 github地址效果安装 vue: npm install v ...
Vue + Element UI——对话框式登录框DEMO
源代码 <template><div class="login"><el-button type="success" class= ...
element 问号_element ui 对话框el-dialog关闭事件详解
element ui 对话框el-dialog关闭事件详解通常会有需求,在关闭弹框后需要清空填写的数据,这时候就需要关闭事件了在标签中加入@close='closeDialog' mothods中 ...
（已开源）基于高德SDK 、Api，实现纯H5的精准坐标选址工具
背景由于第一版是基于端上 Windvane 做的跨页面选址工具,社区内有不少同学希望做个支持纯H5的版本这也是我在一期时候的待完善计划之一一期:基于高德 + Windvane 的选址工具,对高 ...

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

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

最新文章

热门文章