Vue接入腾讯地图

  在public文件下index.html 引入

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=D5VBZ-C3EHW-L6IRB-OOCSD-5HV3O-MOB2M"></script>

定义两个对象   

map: null,
marker: null,

地图初始化

    //地图初始化
    initMap() {
        //初始化经纬度
      let local = ["39.98412", "116.307484"];
      let map = new TMap.Map(document.getElementById("container"), {
        center: new TMap.LatLng(local[0], local[1]), //设置地图中心点坐标
        zoom: 13, //设置地图缩放级别
      });
      //地图被点击时调用
      map.on("click", this.clickHandler);
      //标记图标
      this.marker = new TMap.MultiMarker({
        map: map,
        styles: {
          // 点标记样式
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png", 
          }),
        },
        geometries: [
          {
            // 标记位置(经度，纬度)
            position: new TMap.LatLng(local[0], local[1]),
          },
        ],
      });

      this.map = map;
    },

地图点击方法

    clickHandler(evt) {
      var lat = evt.latLng.getLat().toFixed(6);
      var lng = evt.latLng.getLng().toFixed(6);
      if (this.marker) {
        this.marker.setMap(null);
        this.marker = null;
      }
      this.marker = new TMap.MultiMarker({
        map: this.map,
        styles: {
          // 点标记样式
          marker: new TMap.MarkerStyle({
            width: 20, // 样式宽
            height: 30, // 样式高
            anchor: { x: 10, y: 30 }, // 描点位置
            src: "https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/markerDefault.png", 
          }),
        },
        geometries: [
          {
            // 标记位置(经度，纬度)
            position: new TMap.LatLng(lat, lng),
          },
        ],
      });

      console.log("您点击的的坐标是：" + lat + "," + lng);
    },