Vue项目引入腾讯地图，实现可以根据关键词搜出相关位置，并定位到该位置

1、首先要先注册腾讯地图，去控制台创建应用，拿到key。

新建应用之后，要先给应用配置额度，否则请求相关接口的时候会报额度已满等相关提示。

1. 关键词输入提示
   请求url：https://apis.map.qq.com/ws/place/v1/suggestion
   参数key是必须的，keyword是必须的（即关键词）

2. 逆地址解析
   请求url： https://apis.map.qq.com/ws/geocoder/v1/?location=
   参数key是必须的，location也是必须的（即经纬度），格式lat,lng

2、请求相关接口的时候，可能会出现跨域的问题

解决跨域，可以使用jsonp的请求方式解决

3、在index.html文件引入

<script charset="utf-8" src="https://wemapvis.map.qq.com/api/gljs/v2?v=1.exp&key=您申请的key值">script>

当然了，你也可以选择异步加载的方式引入，参考文档https://wemap.qq.com/Vis/JavascriptAPI/APIGuide/overview/prepare

3、这个自定义map组件传入的参数格式及回调函数

// 参数
selectedValue: {
   
	location: {
   
    	lat: null,
        lng: null
    },
    address: null,
    province: null,
    city: null,
    district: null
},
/选择定位后的回调函数
getLocation(data) {
   
	this.selectedValue = {
   
    	location: {
   
        	lat: data.latitude || null,
          	lng: data.longitude || null
        },
        address: data.address || null,
        province: data.province || null,
        city: data.city || null,
        district: data.district || null
   }
   const temp = {
   
   		address: data.address,
        latitude: data.latitude,
        longitude: data.longitude
   }
   this.$set(this.form_tableData.tableData, this.editIndex, {
    ...this.form_tableData.tableData[this.editIndex], ...temp })
},

3、绘制地图,这是自定义的map组件

<template>
  <el-dialog
    v-if="dialogVisible"
    id="mapDialog"
    title="请选择详细地址"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    custom-class="map-Dialog"
    width="40%"
    @close="onClose"
    @closed="onClosed"
  >
    <div class="well-map">
      <div class="selected-info">
        <div>
          <span class="label">所选地址：</span>
          <span>{
   {
   
            locData.address ? locData.address : selectedValue.address
          }}</span>
        </div>
      </div>
      <div v-clickoutside="handleBlur" class="search-row">
        <el-row class="input-wrap" :gutter="20">
          <el-col :span="20">
            <el-input
              v-model="searchKey"
              placeholder="请输入要搜索的地址"
              @click="handleFoucus"
              @input="handleSearch()"
            />
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="handleSearch()">搜索</el-button>
          </el-col>
        </el-row>

        <ul v-show="showAddressList && addressList.length">
          <li
            v-for="(item, index) in addressList"
            :key="index"
            @click.stop="handleSelect(item)"
          >
            <span class="title">{
   {
    item.title }}</span>
            <span class="other-info">{
   {
    item.address }}</span>
          </li>
        </ul>
      </div>