记录在Vue项目里面使用腾讯地图

目录

前言

一、异步引入SDK

1.封装初始化方法。

2.引入并使用。

二、腾讯地图marker使用

1.效果预览

2.代码实现

三、在地图上画线并测量距离

1.效果预览

2.代码实现

---

前言

本文主要记录一下在Vue项目里面使用腾讯地图实现的一些功能。如：异步引入腾讯地图SDK、腾讯地图marker的使用、在地图上画线计算距离并回显、在地图上画不规则闭合图形计算面积。

---

一、异步引入SDK

1.封装初始化方法。

export default {
    init: function (){
      const AK = "你的key";
      const TMap_URL = "https://map.qq.com/api/gljs?v=1.exp&libraries=tools,service&key="+ AK +"&callback=onMapCallback";
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if(typeof TMap !== "undefined") {
          resolve(TMap);
          return true;
        }
        // 地图异步加载回调处理
        window.onMapCallback = function () {
          resolve(TMap);
        };
  
        // 插入script脚本
        let scriptNode = document.createElement("script");
        scriptNode.setAttribute("type", "text/javascript");
        scriptNode.setAttribute("src", TMap_URL);
        document.body.appendChild(scriptNode);
      });
    }
  }  

这里要注意的是，我们会使用腾讯地图的线、面绘制和测量，需要使用额外的tools和service类。如果不涉及这些功能，可以不额外引入libraries。参考文档JavaScript API | 腾讯位置服务 (qq.com)

2.引入并使用。

// 引入加载TXMap的方法
import TMap from "@/utils/initMap";
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    TMap.init().then((TMap) => {
      this.TXMap = TMap;
      this.tMap = new TMap.Map("map", {
        center: new TMap.LatLng(centerPoint.latitude, centerPoint.longitude), //设置地图中心点坐标
        zoom: 15, //设置地图缩放级别
        viewMode: "2D",
      });
    });
  },

二、腾讯地图marker使用

1.效果预览

2.代码实现

    获取要标记在地图上marker的经纬度集合，将获取到的点位集合处理为地图可以识别的点。然后使用TXMap.MultiMarker()把点位渲染到地图上。

三、在地图上画线并测量距离

1.效果预览

        

2.代码实现

        要实现这个功能并不难，腾讯地图已经实现了这个功能，只需要引入对应的tools工具类，再加上自己的业务代码即可，直接上代码。

在地图上绘制图形并计算面积和绘制路线同理，只是调用的方法不一样，可自行实现。如有错误，欢迎指正。

---