在vue3中使用腾讯地图TMap
前提：在使用前 需要到腾讯地图官网去注册申请 申请通过官方会给一个key值作为标识；

使用腾讯地图目的是获取位置信息也就是经纬度，下面来看下腾讯地图的使用

一、功能分析

1. 可以根据关键字模糊搜索
2. 点击地图可以获取到具体的位置也就是经纬度
3. 刚进入地图获取到当前的地址位置

知道了具体需要哪些功能了 就开始代码了
1.要在项目下的public中的index.html中引入腾讯地图 这个是因为腾讯地图没有同步vue 所以在index.html中引入 其中的key 是上面说的 申请成功会给到一个key值

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

2.在页面中写入一个div 放置地图

3.进入页面初始化地图
要在页面中引入地图

const TMap = (window as any).TMap;

初始化地图的方法

2.获取当前的地理位置 在腾讯地图API 中有相应的接口

https://apis.map.qq.com/ws/location/v1/ip

注意：如果我们直接拿接口请求的话 会跨域 所以 需要进行代理，在vue.config中代理


获取到当前的位置 并重新加载地图

3.点击地图获取经纬度 在初始化的时候绑定click事件

4.标记地图

5.根据输入的地址 获取经纬度（地址解析 地址转坐标）
腾讯地图API接口 https://apis.map.qq.com/ws/geocoder/v1/?address=

具体代码如下

6.最后我们写关键字提示功能 其实也就是一个接口
https://apis.map.qq.com/ws/place/v1/suggestion


具体代码

使用的整体代码如下 请求的接口api 我进行了封装所以没有写出来

<template>
  <div>
    <div>
      <el-autocomplete
        v-model="address"
        :fetch-suggestions="querySearch"
        placeholder="请输入详细地址"
        :trigger-on-focus="false"
      />
      <el-button type="primary" @click="getLocations">
        搜索
      </el-button>
    </div>
    <div id="amp-container" />
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, ref, toRefs,inject } from 'vue';

export default defineComponent({
  setup() {
    const $api:any = inject("$api");
    const dataMap = reactive({
      map:'',
      markerLayer:'',
      latitude: '', //纬度
      lngitude: '', //经度
    });
    const TMap = (window as any).TMap;
    onMounted(()=>{
      init();
      getLocation();
    });
    const init =()=>{
      let center = new TMap.LatLng(dataMap.latitude,dataMap.lngitude);
      dataMap.map = new TMap.Map(document.getElementById('amp-container'), {
        center: center,//设置地图中心点坐标
        zoom:11,   //设置地图缩放级别
        viewMode:'2D'
      });
      (dataMap.map as any).on('click',clickHandler); // 绑定点击地图获取地理位置的事件
      markerLayer(); // 标记地图
    };
    // 重载地图
    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();
    };
    const getLocation = async() => {
      try {
         let params = {
          // ip:(window as any ).returnCitySN['cip'],
          key: "", // 填申请到的腾讯key
        };
        let { result }  = await $api.cerStores.getLoaction(params);
        if (result) {
          dataMap.latitude = result.location.lat;
          dataMap.lngitude = result.location.lng;
          (dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude,dataMap.lngitude)); 
          reloadMap();
        }
      } catch (e) {
        console.log(e);
      }
    };
     // 点击获取经纬度
    const clickHandler = (evt:any) => {
      dataMap.latitude = evt.latLng.getLat().toFixed(6);
      dataMap.lngitude = evt.latLng.getLng().toFixed(6);
      (dataMap.map as any).setCenter(new TMap.LatLng(dataMap.latitude,dataMap.lngitude));
      reloadMap();
    };
    //标记地图 
    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),  //点标记坐标位置
          },
        ]
      });
    };
    const  address = ref('');
    // 获取搜索经纬度
    const getLocations = async() => {
      try {
        let params = {
          key: "", // 填申请到的腾讯key
          address: address.value, //具体的地址
        };
        let { result }  = await $api.cerStores.getGeocoder(params);
        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);
      }
    };
    const querySearch = async(queryString:string,cb:any)=>{
       try {
         let params = {
          keyword: queryString,
          key: "", // 填申请到的腾讯key
        };
         let { data }  = await $api.cerStores.getSuggestion(params);
         const results = data.map((item:any)=>{
           let obj = {
             value:item.address,
             address:item.address
           };
           return obj;
         });
         cb(results); 
      } catch (e) {
        console.log(e);
      }
    };
    return {
      ...toRefs(dataMap),
      address,
      getLocations,
      querySearch
    };
  },
});
</script>