vue 引入腾讯地图（带搜索建议）

之前项目里引用过腾讯地图组件，但最近使用发现几个腾讯地图接口都报错了，提示此功能未被授权

查询官网得知接口被关闭了，好吧，只好重新找解决方案了

腾讯地图接口官网（WebService API | 腾讯位置服务）

注意：如果调用接口提示没有额度时需要把使用的接口把额度分配一下

<template>
  <el-dialog
    title="选择地址"
    :visible.sync="isShowDialog"
    width="1000px"
    top="50px"
  >
    <div class="search">
      <el-input v-model="keyword" placeholder="请输入搜索地址信息" clearable>
        <el-button slot="append" icon="el-icon-search" @click="searchAddress" />
      </el-input>
    </div>

    <div id="mapContainer" style="width: 100%; height: 350px" />

    <div class="address">
      <span>当前选点：</span>
      <b>{{ nowAddress ? (nowAddress.formatted_addresses.recommend) : '尚未选点' }}</b>
      <el-button v-if="nowAddress" type="text" @click="selectAddress(nowAddress, 1)">【确认选择】</el-button>
    </div>

    <el-table
      highlight-current-row
      :data="nearPointList"
      height="300"
      style="width: 100%"
      class="table"
    >
      <el-table-column prop="address" label="附近推荐地点">
        <template slot-scope="scope">
          {{ scope.row.address }}{{ scope.row.title }}
          <!-- {{ scope.row }} -->
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click.native.prevent="selectAddress(scope.row, 2)">确认选择</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      keyword: '', // 搜索关键词
      nearPointList: [], // 附近地址
      isShowDialog: false, // 是否显示弹窗
      markersArray: [],
      marker: null,
      geocoder: null,
      nowAddress: null, // 选择的地点
      geocoderLocation: null,
      map: null
    }
  },
  mounted() {

  },
  methods: {
    // // 搜索地址
    searchAddress() {
      if (!this.keyword) {
        return this.$message.error('请输入搜索地址信息')
      }
      const url = 'https://apis.map.qq.com/ws/geocoder/v1' // 文字转经纬度接口就是地理位置信息的接口
      const data = {
        key: 'your_key',
        address: this.keyword,
        output: 'jsonp'
      }
      this.$jsonp(url, data).then(res => {
        // console.log(res)
        if (res.status === 0) {
          this.getAddress(res.result.location.lat, res.result.location.lng)
          this.setLocationByLatLng(res.result.location.lat, res.result.location.lng)
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },

    // 初始化地图
    initMap() {
      const that = this
      const latLon = new qq.maps.LatLng(31.916527, 120.397128)
      this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
        zoom: 13,
        center: latLon,
        mapTypeId: qq.maps.MapTypeId.ROADMAP
      })
      const listener = qq.maps.event.addListener(this.map, 'click', function (event) {
        console.log(event)
        that.setLocationByLatLng(
          event.latLng.lat,
          event.latLng.lng
        )
        that.getAddress(event.latLng.lat, event.latLng.lng)
      })
    },
    getAddress(lat, lng) {
      // 经纬度解析类回调函数
      const url = 'https://apis.map.qq.com/ws/geocoder/v1' // 文字转经纬度接口就是地理位置信息的接口
      const ni_data = {
        key: 'your_key',
        location: `${lat},${lng}`,
        get_poi: 1,
        output: 'jsonp'
      }
      this.$jsonp(url, ni_data).then(res => {
        console.log(res, 'ni')
        if (res.status === 0) {
          this.nowAddress = res.result
          this.nearPointList = res.result.pois
        } else {
          this.$message.error(res.message)
        }
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    // 选择地址事件
    selectAddress(item, type) {
      if (type === 1) {
        this.$emit(
          'on-select',
          item.formatted_addresses.recommend,
          item.location.lat,
          item.location.lng
        )
        this.isShowDialog = false
      }
      if (type === 2) {
        this.$emit(
          'on-select',
          item.address + item.title,
          item.location.lat,
          item.location.lng
        )
        this.isShowDialog = false
      }
    },

    // 显示地图
    show() {
      this.isShowDialog = true
      setTimeout(() => {
        this.keyword = ''
        this.initMap()
      })
    },

    // 根据经纬度进行定位
    setLocationByLatLng(lat, lng) {
      setTimeout(() => {
        const latLng = new qq.maps.LatLng(lat, lng)

        this.map.setCenter(latLng)
        // 标记点
        this.marker = new qq.maps.Marker({
          map: this.map,
          position: latLng
        })
        this.markersArray.push(this.marker)
        if (this.markersArray.length > 1) {
          for (let i = 0; i < this.markersArray.length - 1; i++) {
            this.markersArray[i].setMap(null) // 清除标记
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.search {
  margin-bottom: 15px;
  margin-top: -20px;
}

.address {
  margin-top: 15px;
  margin-bottom: 10px;

  .el-button {
    padding: 0;
  }
}

.table {
  .el-button {
    padding: 0;
  }
}
</style>

使用：

 <el-button slot="append" @click="openMap">选择地址</el-button> 
 <!-- 地图选择 -->
  <map-select ref="ms" @on-select="selectAddress" />
 // 打开地图弹窗
    openMap() {
      this.$refs.ms.show()
      // 根据经纬度设置初始值
      this.$refs.ms.setLocationByLatLng(this.formData.latitude, this.formData.longitude)
    },
// 地址选择后的回调函数
    selectAddress(address, lat, lng) {
      this.formData.address = address
      this.formData.latitude = lat
      this.formData.longitude = lng
    },