高德地圖文檔地址
http://lbs.amap.com/api/lightmap/guide/picker/
結合步驟:
1.通過iframe內嵌引入高德地圖組件
key就選你自己申請的key
<template>
<div>
<div id="iframe">
<iframe class="map-item" v-if="ismap" id="getAddress" @load="loadiframe"
src="https://m.amap.com/picker/?key=xxxxxxxxxxx"
style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
</div>
</div>
</template>
2.監聽高德組件load事件
當然在vue里面可以使用 @load="loadiframe" 進行監聽
ps:onload :事件,就是選取地址之后,觸發的一個事件。比如點擊咖啡陪你,就會觸發onload事件。
3.實現監聽代碼:
ps:高德地圖通過 iframe 的 postmessage 向父組件傳值,我們進行接收就可以。更詳細的內容產考
https://segmentfault.com/a/1190000004512967
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") {
/ /實現業務代碼
}
}.bind(this), false);
},
3.完整高德地圖組件代碼
<template>
<div>
<div id="iframe">
<iframe class="map-item" v-if="ismap" id="getAddress" @load="loadiframe"
src="https://m.amap.com/picker/?key=xxxxxxxxxxxxx"
style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
</div>
</div>
</template>
<script>
export default {
props: ["ismap"],
data() {
return {
locationData: {}
}
},
created() {
},
methods: {
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") {
//業務代碼
console.log(e):
}
}.bind(this), false);
},
}
}
</script>
<style>
.map-item {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: #fff;
z-index: 222;
}
</style>