地图多点动态标注

<template>
  <div style="height: 100%; overflow: hidden">
    <div id="mapDiv" style="height: 100%; overflow: hidden"></div>
  </div>
</template>
<script
  type="text/javascript"
  src="http://api.tianditu.gov.cn/api?v=4.0&tk=f343ab8a6ef2933bd8927027916f9369"
></script>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      center: [116.07596, 36.60292],
      map: null,
      zoom: 14,
      markerArr: [
        { position: [116.07596, 36.60292], avatar: "profile" },
        { position: [116.08154, 36.44449], avatar: "profile" },
      ],
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.onLoad();
    });
  },
  methods: {
    addMarker() {
      let _this = this;
      this.markerArr.forEach((item) => {
        //创建图片对象
        let imgName = item.avatar;
        let iconSize = [36, 36];
        var icon = new T.Icon({
          iconUrl: require(`@/assets/avatar/${imgName}.jpg`),
          iconSize: new T.Point(iconSize[0], iconSize[1]),
          iconAnchor: new T.Point(8, 8),
        });
        let point = new T.Marker(
          new T.LngLat(item.position[0], item.position[1]),
          {
            icon: icon,
          }
        );
        this.map.addOverLay(point);
        // 鼠标移入事件
        point.addEventListener("mouseover", function (e) {});
        // 鼠标移出事件
        point.addEventListener("mouseout", function (e) {});

        point.addEventListener("dblclick", function (e) {});
      });
    },
    onLoad() {
      // 销毁地图资源
      //   this.map.dispose();

      this.map = new T.Map("mapDiv");

      //设置显示地图的中心点和级别
      this.map.centerAndZoom(
        new T.LngLat(this.center[0], this.center[1]),
        this.zoom
      );
      this.map.setMapType(TMAP_TERRAIN_HYBRID_MAP);
      this.addMarker();
    },
  },
};
</script>
<style type="text/css" scoped></style>

设计图

效果图