注意:开发环境、正式环境需在腾讯地图配置ip地址白名单、域名白名单
封装map组件:
<template>
<iframe width="100%" style="border: none;width: 100%;height: 100%;" :src="map_src"></iframe>
</template>
<script>
export default {
data() {
return {
map_src: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=5U7BZ-AWLKU-HMRVX-2Y4EJ-TTD2J-Z5FCZ&referer=location',
form: {
//省市区ID
id_area: [
0,
0,
0
],
address: '',
lng: '',
lat: '',
},
map_data: {
url: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=5U7BZ-AWLKU-HMRVX-2Y4EJ-TTD2J-Z5FCZ&referer=location',
address: '',
lng: '',
lat: '',
},
}
},
created() {
let that = this
window.addEventListener('message', function(event) {
// 接收位置信息,用户选择确认位置点后选点组件会触发该事件,回传用户的位置信息
var loc = event.data;
console.log(loc)
if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息,需判断module是否为'locationPicker'
that.map_data.address = loc.poiaddress
that.map_data.lat = loc.latlng.lat
that.map_data.lng = loc.latlng.lng
//调用父组件方法并传值给父组件
that.$emit('chooseOrgAddr',that.map_data)
}
}, false);
}
}
</script>
<style>
</style>
然后在用到的地方引入该组件,需要的数据在该组件中的map_data