vue 实现腾讯地图搜索选点功能（附加搜索联想功能）

注意：开发环境、正式环境需在腾讯地图配置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: {//省市区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=5U7BZ-AWLKU-HMRVX-2Y4EJ-TTD2J-Z5FCZ&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.lng//调用父组件方法并传值给父组件that.$emit('chooseOrgAddr',that.map_data)}}, false);}}</script><style></style>

然后在用到的地方引入该组件，需要的数据在该组件中的map_data