Vue使用高德地图实现城市定位

这篇文章主要为大家详细介绍了Vue使用高德地图实现城市定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码，供大家参考，具体内容如下

一前端选择框点击跳转至地图选址页面

  　　收货地址

二触发点击事件

 mapaddress(){ 　  et a=this.$route.query.id 　    　localStorage.setItem('names',this.names); 　    　localStorage.setItem('phone',this.phone); 　    　localStorage.setItem('addressDetail',this.addressDetail); 　    　localStorage.setItem('postalCode',this.postalCode); 　    　localStorage.setItem('checked',this.checked); 　    　this.$router.push({ 　    　　　path: '/mapLocation', 　    　　　query: {id:a,are:this.are} 　   　}) }

三地图选址页面

使用ifarm内嵌引入高德地图组件高德地图注意使用地图需要申请key申请时注意根据自己需求选择服务

四地图加载完成选择地址后跳转至父页面

由于我的需求在输入后跳转父页面，父页面的表单会刷新，所以做了一个缓存处理。

 loadiframe() { 　　let iframe = document.getElementById('getAddress').contentWindow; 　　iframe.postMessage('hello', 'https://m.amap.com/picker/'); 　　window.addEventListener("message", function (e) { 　　if (e.data.command != "COMMAND_GET_TITLE") { 　　//实现业务代码 　　let a=this.$route.query.id 　　let are=this.$route.query.are 　　let address=e.data.address 　　let location=e.data.location 　　let name=e.data.name 　　this.$router.push({ 　　path: '/addressFill', 　　　　query: {address:address,location:location,name:name,id:a,are:are} 　　}) 　　} 　　}.bind(this), false); },

五缓存处理

在跳转子地图选择页面时将表单数据存入缓存，子页面跳转回来时当前页面表单数据不刷新。

 localStorage.setItem('names',this.names); localStorage.setItem('phone',this.phone); localStorage.setItem('addressDetail',this.addressDetail); localStorage.setItem('postalCode',this.postalCode); localStorage.setItem('checked',this.checked);

六清除缓存

缓存解决了页面返回无数据的情况，但是同时会产生这个页面的缓存一直存在，所以，在返回当前页面时进行验证，并清除缓存

 let addressDetail= localStorage.getItem('addressDetail'); if(addressDetail!=undefined&&addressDetail!=null&&addressDetail!=""){ 　　this.addressDetail=addressDetail 　　localStorage.removeItem("addressDetail"); }else{ 　　this.addressDetail="" }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持万博manbetx平台中文网。

以上就是Vue使用高德地图实现城市定位的详细内容，更多请关注万博manbetx平台中文网其它相关文章！