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

十个美梦盖过天空

已于 2022-06-16 16:05:53 修改

阅读量1.9w

点赞数 14

文章标签： vue.js

于 2022-03-29 22:43:36 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60835161/article/details/123833185

版权

前言

本文主要记录一下在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()把点位渲染到地图上。


<script>
export default {
  data() {
    return {
      tMap: null, // 腾讯地图实例
      TXMap: null, // 腾讯地图原型
      markersData: [], // 标记数据
      infoWin: null, // 信息窗口实例
    };
  },
  methods: {
    // 获取标记数据集合 根据项目自行实现。
    getMarkersData() {
        //....
    },
    // 将坐标点处理为地图可以识别的坐标
    hanleMarker() {
      let myMarkers = [];
      this.markersData.map((item, index) => {
        let obj = {
          id: item.id,
          styleId: "marker" + item.category,
          position: new this.TXMap.LatLng(item.lat * 1, item.lon * 1),
          properties: {
            title: `${item.categoryName}[${item.number}]`,
            status: item.status,
          },
        };
        myMarkers.push(obj);
      });
      return myMarkers;
    },

    // 渲染marker
    renderMarker() {
      let markerArr = this.hanleMarker();
      let map = this.tMap;
      this.marker = new this.TXMap.MultiMarker({
        id: "marker-layer",
        map: map,
        styles: this.setMarkImg(),
        geometries: markerArr,
      });
      //给标识添加点击事件
      this.marker.on("click", (event) => {
        let { lat, lng } = event.latLng;
        let { title, status } = event.geometry.properties;
        this.initWindow(lat, lng, title, status);
        this.infoWin.open();
      });
    },
    // 看上面的动图发现 2个marker图标不一样，这里代码就是实现此功能
    setMarkImg() {
      let styleOption = {};
      // 遍历图标集合
      this.typeOptions.map((item) => {
        styleOption["marker" + item.id] = new this.TXMap.MarkerStyle({
          cursor: "pointer",
          width: 25,
          height: 25,
          anchor: { x: 16, y: 32 },
          src: item.active_icon,
        });
      });
      return styleOption;
    },
    // 初始化一个信息窗口
    initWindow(lat, lng, title, status) {
      // 一次只能打开一个窗口 打开之前先关闭之前打开的
      if (this.infoWin) {
        this.closeWindow();
      }
      this.infoWin = new this.TXMap.InfoWindow({
        map: this.tMap,
        position: new this.TXMap.LatLng(lat, lng),
        // enableCustom: true,
        content: `<ul class="equipment">
        <li>设施：<span>${title}</span></li>
        <li>状态：<span class="${status == 1 ? "good" : "bad"}">${
          status == 1 ? "正常" : "损坏"
        }</span></li>
        </ul>`,
        offset: { x: 0, y: -30 }, //设置信息窗相对position偏移像素
      });
      // 信息窗口关闭回调
      this.infoWin.on("closeclick", () => {
        // ...
      });
    },
    // 关闭信息窗口
    closeWindow() {
      if (this.infoWin) {
        this.infoWin.close();
      }
    },
  },
};
</script>

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

1.效果预览

2.代码实现

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

<script>
export default{
    data(){
      tMap: null, // 地图实例
      TXMap: null, // 地图原型
      miniMap: null, // 表单里面的地图
      mapLine: null, //表单地图折线实例
      measure: null, // 测量工具实例 
    },
    methods:{
        // 添加路线功能是放在弹窗里面的，所以在打开弹窗时初始化一下弹窗里面的地图实例，如果已经存在，则先销毁。
         //显示表单弹出层
    showPop() {
      this.dialogVisible = true;
      this.$nextTick(() => {
        // 判断是否存在表单地图实例 已存在先销毁 避免重复创建
        if (this.miniMap) {
          this.miniMap.destroy();
        }
        TMap.init().then((TMap) => {
          this.TXMap = TMap;
          //初始化地图折线实例
          this.miniMap = new TMap.Map("miniMap", {
            center: new TMap.LatLng(
              centerPoint.latitude,
              centerPoint.longitude
            ), //地图显示中心点
            zoom: 15, //设置地图缩放级别
            viewMode: "2D",
          });
          this.mapLine = new TMap.MultiPolyline({
            map: that.miniMap,
          });
          // 弹出层打开且非编辑状态 直接进入画线模式
          if (!this.addForm.id) {
            // 初始化绘制线路
            this.initPaint();
          }
        });
      });
    },
    // 初始化画线模式
    initPaint() {
      this.measure = null;
      this.measure = new this.TXMap.tools.MeasureTool({
        map: this.miniMap,
      });
      this.measure
        .measureDistance()
        .then((res) => {
           //绘制线路完成的回调 可以获取路径数据集合和路径长度
          document.querySelector(".tip-close").style.display = "none";
          this.addForm.points = res.path;
          this.addForm.length = res.totalDistance;
        })
        .catch((err) => {
          console.log(err);
        });
    },
 // 清空路线
    clear() {
       //判断当前地图是否已经绘制了路径
      if (this.addForm.points.length > 0) {
        if (this.measure) {
           //腾讯地图没有提供清除路线的api，通过查看原型发现的方法可以清除已经绘制的路线
          this.measure._removeFromMap();
          this.measure = null;
        }
        if (this.addForm.id) {
          this.mapLine.setMap(null);
        }
        this.addForm.points = [];
        this.addForm.length = 0;
        this.initPaint();
      } else {
        this.$message({
          type: "error",
          message: "没有需要清除的路线",
        });
      }
    },
    },
    mounted(){
        // 初始化地图实例
        TMap.init().then((TMap) => {
          this.TXMap = TMap;
          this.tMap = new TMap.Map("map", {
          center: new TMap.LatLng(centerPoint.latitude, centerPoint.longitude), //地图显示中心点
          zoom: 16, //设置地图缩放级别
          viewMode: "2D",
        });
      }); 
    }
    

}
</script>

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