[JavaScript知识库]vue3 中使用腾讯地图

本来用百度就很方便，结果客户要求。。。
折腾了一天，特别记录一下。
首先构建需要的环境vue、axios、element-plus等
然后再publuc下引入腾讯地图的链接

    src="https://map.qq.com/api/gljs?v=1.exp&key=自己的秘钥></script>

然后再创建地图方法前加上window，例如

<template>
  <div>
    <div ref="mapInfo" id="info" class="mapInfo"></div>
    <div id="textInfo" class="textInfo"></div>
    <div class="searchBox">
      <el-form :model="formInfo" ref="searchForm" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formInfo.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formInfo.phone" placeholder="电话"></el-input>
        </el-form-item>

        <el-form-item label="登录时间"
          ><el-date-picker
            v-model="formInfo.beginTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="截止时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-button type="primary" @click="doSearch">搜索</el-button>
        <el-button @click="doReset">重置</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      map: null,
      MultiMarker: null,
      geometriesList: [],
      setInterval: null, // 定时器
      formInfo: {
        name: "",
        phone: "",
      },
    };
  },
  setup() {
    const { proxy } = getCurrentInstance();
    console.log("proxy", proxy);
    return { proxy };
  },
  mounted() {
    this.initMap();
    clearInterval(this.setInterval); //停止之前的定时器
    this.getList();
    // this.setInterval = setInterval(this.getList, 1000);
  },
  unmounted() {
    clearInterval(this.setInterval); //停止之前的定时器
    clearInterval();
    this.setInterval = null;
  },
  methods: {
    doSearch() {
      console.log(this.formInfo);
      this.getList();
    },
    doReset() {
      console.log("重置");
      this.formInfo = {
        name: "",
        phone: "",
        beginTime: "",
      };
    },
    initMap() {
      console.log("初始化地图");
      console.log(window);
      const that = this;
      let info = document.getElementById("info");
      // var info = this.$refs.mapInfo;
      let center = new window.TMap.LatLng(xxx,xxxx); // 这里写自己的地图中心经纬度
      //初始化地图
      this.map = new window.TMap.Map(info, {
        zoom: 12, //设置地图缩放级别
        center: center, //设置地图中心点坐标
        baseMap: {
          type: "vector",
          // features: ["base", "building3d"], // 隐藏矢量文字
        },
      });
      this.makeMapInfo();
    },
    makeMapInfo() {
      let tencentmap = this.map;
      const that = this;
      let info = document.getElementById("info");
      let textInfo = document.getElementById("textInfo");
      //初始化散点图并添加至map图层
      this.MultiMarker = new window.TMap.MultiMarker({
        map: tencentmap, // 显示Marker图层的底图
        styles: {
          small: new window.TMap.MarkerStyle({
            // 点标注的相关样式
            width: 34, // 宽度
            height: 46, // 高度
            anchor: {
              x: 17,
              y: 23,
            }, // 标注点图片的锚点位置
            src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png", // 标注点图片url或base64地址
            color: "#333", // 标注点文本颜色
            size: 16, // 标注点文本文字大小
            direction: "bottom", // 标注点文本文字相对于标注点图片的方位
            offset: {
              x: 0,
              y: 8,
            }, // 标注点文本文字基于direction方位的偏移属性
            strokeColor: "#fff", // 标注点文本描边颜色
            strokeWidth: 2, // 标注点文本描边宽度
          }),
          big: new window.TMap.MarkerStyle({
            width: 58,
            height: 76,
            anchor: {
              x: 36,
              y: 32,
            },
            src: "https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/big.png",
            color: "#333",
            size: 24,
            direction: "bottom",
            strokeColor: "#f3f3f3",
            offset: {
              x: 0,
              y: 10,
            },
            strokeWidth: 2,
          }),
        },
        geometries: [],
      });
      
      this.MultiMarker.setGeometries(this.geometriesList);

      //绑定点击事件
      this.MultiMarker.on("click", function (evt) {
        console.log(evt.geometry);
        if (evt.geometry) {
          textInfo.style.display = "block";
          textInfo.innerHTML =
            "当前点击点坐标为：" +
            evt.geometry.position.lat +
            "," +
            evt.geometry.position.lng +
            "<br>姓名：" +
            evt.geometry.properties.text;
        } else {
          textInfo.style.display = "";
        }
      });
    },
    // 获取列表
    getList() {
      const that = this;
      let params = this.formInfo;
      this.MultiMarker.setMap(null); // 清空下之前的
      that.geometriesList = [];
      this.proxy.$api
        .post("/index/getAllMap", params)
        .then((res) => {
          // console.log(res);
          let list = res.data.data;
          if (list.length == 0) {
            console.log("数据为空");
              ElMessage.error('暂无数据')
           
          }
          // 构造数据
          let listData = [];
          var randomCount = list.length;
          while (randomCount--) {
            var userInfo = list[randomCount];
            if (
              userInfo.now_lat &&
              userInfo.now_lng &&
              userInfo.now_lng > 10 &&
              userInfo.now_lat > 10
            ) {
              userInfo.now_lat = Number(
                userInfo.now_lat.substring(0, userInfo.now_lat.indexOf(".") + 6)
              );
              userInfo.now_lng = Number(
                userInfo.now_lng.substring(0, userInfo.now_lng.indexOf(".") + 6)
              );
              listData.push({
                styleId: "marker" + userInfo.id,
                position: new window.TMap.LatLng(
                  userInfo.now_lat,
                  userInfo.now_lng
                ),
                content: userInfo.name,
                properties: {
                  text:
                    userInfo.name +
                    "<br>" +
                    "手机号：" +
                    userInfo.phone +
                    "<br>" +
                    "最后定位时间" +
                    userInfo.last_address_time +
                    "<br>",
                },
              });
            }
          }
          // console.log(listData);
          that.geometriesList = listData;
          that.makeMapInfo();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss">
.mapInfo {
}
.textInfo{
  
  padding: 10px;
  z-index: 1000;
  position: absolute;
  left: 0;
  top: 0;
  text-align: left;
  background: #fff;
}
.searchBox {
  position: absolute;
  left: 50%;
  top: 0;
  background: #fff;
  padding: 10px;
  z-index: 1000;
  width: 500px;
}
</style>