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: {
            //省市区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