您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“Vue怎么使用手机地图实现城市定位”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue怎么使用手机地图实现城市定位”吧!
一 前端选择框点击跳转至地图选址页面
<van-row class="address_item"> <van-col span="6" class="item-title">收货地址</van-col> <van-col span="18"> <p class="item"> <van-icon name="arrow" class="arrow"/> <van-icon name="location-o" /> <span><van-field v-model="mapname" placeholder="点击选择" readonly v-on:click="mapaddress"/></span> </p> </van-col> </van-row>
二 触发点击事件
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申请时注意根据自己需求选择服务
<template> <iframe id="getAddress" @load="loadiframe" src="https://m.amap.com/picker/?keywords=写字楼,小区,学校&zoom=15¢er=&radius=1000&total=20&key=你申请的key" > </iframe> </template>
四 地图加载完成选择地址后跳转至父页面
由于我的需求在输入后跳转父页面,父页面的表单会刷新,所以做了一个缓存处理。
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="" }
到此,相信大家对“Vue怎么使用手机地图实现城市定位”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。