本文例項為大家分享了使用高德地圖實現城市定位的具體www.cppcns.com程式碼，供大家參考，具體內容如下

一 前端選擇框點選跳轉至地圖選址頁面

<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="www.cppcns.comarrow"/>
　　<van-iconhttp://www.cppcns.com
 
 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&center=&radius=1000&total=20&key=你申請的key"
　　　　style="width:100%; height:100%;position: absolute;z-index:22222;">
　　</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.se客棧tItem('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=""
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。