Vue怎么使用手機(jī)地圖實(shí)現(xiàn)城市定位

本篇內(nèi)容主要講解“Vue怎么使用手機(jī)地圖實(shí)現(xiàn)城市定位”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“Vue怎么使用手機(jī)地圖實(shí)現(xiàn)城市定位”吧!

一 前端選擇框點(diǎn)擊跳轉(zhuǎn)至地圖選址頁(yè)面

<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="點(diǎn)擊選擇" readonly v-on:click="mapaddress"/></span>
　　</p>
　　</van-col>
</van-row>

二 觸發(fā)點(diǎn)擊事件

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}
　   　})
}

三 地圖選址頁(yè)面

使用ifarm內(nèi)嵌引入高德地圖組件高德地圖 注意使用地圖需要申請(qǐng)key申請(qǐng)時(shí)注意根據(jù)自己需求選擇服務(wù)

<template>
　　<iframe id="getAddress" @load="loadiframe"
　　　　src="https://m.amap.com/picker/?keywords=寫(xiě)字樓,小區(qū),學(xué)校&zoom=15&center=&radius=1000&total=20&key=你申請(qǐng)的key"
　　　　>
　　</iframe>
</template>

四 地圖加載完成選擇地址后跳轉(zhuǎn)至父頁(yè)面

由于我的需求在輸入后跳轉(zhuǎn)父頁(yè)面，父頁(yè)面的表單會(huì)刷新，所以做了一個(gè)緩存處理。

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") {
　　//實(shí)現(xiàn)業(yè)務(wù)代碼
　　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);
},

五 緩存處理

在跳轉(zhuǎn)子地圖選擇頁(yè)面時(shí)將表單數(shù)據(jù)存入緩存，子頁(yè)面跳轉(zhuǎn)回來(lái)時(shí)當(dāng)前頁(yè)面表單數(shù)據(jù)不刷新。

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);

六 清除緩存

緩存解決了頁(yè)面返回?zé)o數(shù)據(jù)的情況，但是同時(shí)會(huì)產(chǎn)生這個(gè)頁(yè)面的緩存一直存在，所以，在返回當(dāng)前頁(yè)面時(shí)進(jìn)行驗(yàn)證，并清除緩存

let addressDetail= localStorage.getItem('addressDetail');

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

到此，相信大家對(duì)“Vue怎么使用手機(jī)地圖實(shí)現(xiàn)城市定位”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！