高德地图文档地址
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>