vue pc端使用腾讯地图进行搜索和选点

组件内容为：

<template><a-modal v-model="visibleMap" title="选择地点" @cancel="handleCancelMap" width="80%"><iframe width="100%" style="height: 60vh; width: 76vw; border: none;" :src="map_src">iframe><template slot="footer"><a-button @click="handleSureMap" type='primary'>确定a-button><a-button @click="handleCancelMap" type='primary'>取消a-button>template>a-modal>
template><script>export default {name: 'mapComponents',props: {visibleMap: {type: Boolean,default: false,}},data() {return {map_src: 'https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=这里放你使用的key&referer=location',form: {//省市区IDid_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=这里放你使用的key&referer=location',address: '',lng: '',lat: '',},}},created() {let that = thiswindow.addEventListener('message', function(event) {// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息var loc = event.data;console.log(loc)if (loc && loc.module == 'locationPicker') { //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'that.map_data.address = loc.poiaddressthat.map_data.lat = loc.latlng.latthat.map_data.lng = loc.latlng.lngthat.$emit('chooseMapPoint',that.map_data)} else {that.$emit('chooseMapPoint','选择数据为空')}}, false);},methods: {//地图选点确定handleSureMap() {this.$emit('sure', this.map_data)},// 取消handleCancelMap () {this.$emit('cancel')},}}
script><style>
style>

使用：

<MapComponent :visibleMap='visibleMap' @chooseMapPoint='getCallMap' @cancel='cancelMap' @sure='sureMap'>MapComponent>
methods:{getCallMap (e) {console.log(e)},cancelMap () {this.visibleMap = false},sureMap(e){console.log(e)},
}

（腾讯地图文档上的那个链接太离谱了，用这个https://mapapi.qq.com/web/mapComponents/locationPicker/v/index.html?search=1&type=1&key=这里放你使用的key&referer=location就行）