1.在index.html中引入

 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=你的key"></script>

2.初始化地图

  const dataMap = reactive({
      map: '',
      markerLayer: '',
      latitude: '', //纬度
      lngitude: '', //经度
      address: ''
    })
    const TMap = (window as any).TMap
    //初始化地图
    onMounted(() => {
      init()
    })
    //初始化地图
    const init = () => {
      let center = new TMap.LatLng('39.98412', '116.307484')
      dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
        center: center, //设置地图中心点坐标
        zoom: 11, //设置地图缩放级别
        viewMode: '2D'
      })
      markerLayer() // 标记地图
    }

3.标记地图（坐标）

    //标记地图
    const markerLayer = () => {
      dataMap.markerLayer = new TMap.MultiMarker({
        map: dataMap.map, //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          myStyle: new TMap.MarkerStyle({
            width: 25, // 点标记样式宽度（像素）
            height: 35, // 点标记样式高度（像素）
            // "src": '../../assets/logo.png',  //图片路径
            background: 'pink',
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            anchor: { x: 16, y: 32 }
          })
        },
        //点标记数据数组
        geometries: [
          {
            id: '1', //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            styleId: 'myStyle', //指定样式id
            position: new TMap.LatLng(dataMap.latitude, dataMap.lngitude) //点标记坐标位置
          }
        ]
      })
    }

4.关键词搜索(WebService API | 腾讯位置服务 (qq.com))

(1).需要配合el-autocomplete进行使用

<el-autocomplete
        v-model="address"
        :fetch-suggestions="querySearch"
        placeholder="请输入详细地址"
        :trigger-on-focus="false"
      />

（2).调用腾讯api(https://apis.map.qq.com/ws/place/v1/suggestion)

//搜索
    const querySearch = async (queryString: string, cb: any): Promise<any> => {
      try {
        let params = {
          keyword: queryString,
          key: '你的key'
        }
        let res = await keywordSearch(params)
        let { data } = res
        const results = data.list.map((item: any) => {
          let obj = {
            value: item.address,
            address: item.address
          }
          return obj
        })
        cb(results)
      } catch (e) {
        console.log(e)
      }
    }

//关键词搜索
export const keywordSearch = (params: keywordSearchList) => {
  return request.get({ url: '/api/v1/public/amap/qq/suggestion', params })
}

5.获取到地址进行解析

  // 获取搜索经纬度
    const getLocations = async () => {
      try {
        let params = {
          address: dataMap.address, //具体的地址
          key: '你的key' // 填申请到的腾讯key
        }
        let res = await addressResolution(params)
        let result = res.data
        dataMap.latitude = result.location.lat
        dataMap.lngitude = result.location.lng
        ;(dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude, dataMap.lngitude))
        reloadMap()
      } catch (error) {
        console.log(error)
      }
    }

//地址解析
export const addressResolution = (params: addressResolutionList) => {
  return request.get({ url: '/api/v1/public/amap/qq/geocoder', params })
}

6.重载地图

// 重载地图
    const reloadMap = () => {
      ;(document.getElementById('amp-container') as any).innerHTML = ''
      dataMap.markerLayer = ''
      let center = new TMap.LatLng(dataMap.latitude, dataMap.lngitude)
      dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
        center: center, //设置地图中心点坐标
        viewMode: '2D'
      })
      markerLayer()
    }