vue调用腾讯地图绘制几何图形

1.首先需要引入腾讯地图的JavaScript API库。可以通过CDN或者本地文件引入。在index.html中引入

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

其中YOUR_KEY为你自己申请的腾讯地图开发密钥。

2.创建一个容器元素来显示地图。可以在Vue组件的模板中添加一个div元素，并设置id属性

<template>
    <div id="mapContainer" style="width: 1400px; height: 800px"></div>
</template>

这里将地图容器大小设定为1400x800像素。

3.初始化地图对象，并调用相关API绘制几何图形，并在生命周期函数中调用

    data() {
        return {
          activeId: "polygon", // 初始化默认值
          editor: "",
          map: null,
          totals: [],
        };
    },


    mounted() {
      this.$nextTick(() => {
        this.initMap();
      });
    },


    initMap() {
      this.map = new TMap.Map(document.getElementById("mapContainer"), {
        zoom: 14, // 设置地图缩放级别
        center: new TMap.LatLng(30.656964, 104.066186), // 设置地图中心点坐标
      });
      var polygon = new TMap.MultiPolygon({
        map: this.map,
      });
      this.editor = new TMap.tools.GeometryEditor({
        // TMap.tools.GeometryEditor 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor
        map: this.map, // 编辑器绑定的地图对象
        overlayList: [
          // 可编辑图层 文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocEditor#4
          {
            overlay: polygon,
            id: "polygon",
          },
        ],
        actionMode: TMap.tools.constants.EDITOR_ACTION.DRAW, // 编辑器的工作模式
        activeOverlayId: this.activeId, // 激活图层
        snappable: true, // 开启吸附
      });
      // 监听绘制结束事件，获取绘制几何图形
      this.editor.on("draw_complete", (geometry) => {
        console.log('所有顶点坐标集合', geometry);
        // 多边形处理
        if (this.activeId === "polygon") {
          console.log("得到顶点经纬度的数组", geometry.paths);
        }
      });
    },

使用说明：

绘制：鼠标左键点击及移动即可绘制图形
结束绘制：鼠标左键双击即可结束多边形、折线会自动闭合（圆形、矩形、椭圆单击即可结束）
中断：绘制过程中按下esc键可中断该过程

提示：

我这里只做了绘制多边形，其余的折线、圆形、矩形、椭圆，按照官网文档添加即可