vue3 数据大屏可视化 项目中要求使用腾讯地图，这里将自己实现的代码记录下来，方便复用。数据大屏可视化ui设计的地图很华丽，但是使用腾讯地图没办法实现这种样式效果。vue3使用腾讯地图添加自定义图标

演示demo:vue3数据可视化大屏-科技管理大屏案例演示

申请腾讯地图key 并在index.html中引用

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

组件代码

<template>
  <div class="map wow fadeInUp">
    <div ref="qqMap" id="qqMap" class="qqMap">
    </div>
  </div>
</template>

<script>
import WOW from "wow.js";
import data from './china.json'
import mapicon1 from '../../../assets/mapicon1.png'
import mapicon2 from '../../../assets/mapicon2.png'
import mapicon3 from '../../../assets/mapicon3.png'

var map;
var unit = 'px';

function Flame(options) {
  // DOMOverlay文档地址: https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocDomOverlay
  TMap.DOMOverlay.call(this, options);
}

Flame.prototype = new TMap.DOMOverlay();

// 初始化
Flame.prototype.onInit = function (options) {
  this.position = options.position;
  this.url = options.url;
  this.width = options.width || 20;
  this.height = options.height || 20;
};

// 创建DOM元素，返回一个DOMElement，使用this.dom可以获取到这个元素
Flame.prototype.createDOM = function () {
  var img = document.createElement('img');
  img.style.height = this.height + unit;
  img.style.width = this.width + unit;
  img.src = this.url;
  return img;
};
// 更新DOM元素。在地图上移动/缩放后执行
Flame.prototype.updateDOM = function () {
  if (!this.map) {
    return;
  }
  // 经纬度坐标转转容器像素坐标
  var pixel = this.map.projectToContainer(this.position);
  // 使图中心点对齐经纬度坐标点
  var width = this.dom.clientWidth / 2;
  var left = pixel.getX() - width + unit;
  var top = pixel.getY() - this.dom.clientHeight + unit;
  this.dom.style.transform = `translate(``{left}, ``{top})`;
};
window.Flame = Flame;
export default {
  name: "map",
  props: {
    id: {
      type: String,
      default() {
        return '';
      }
    }
  },
  data() {
    return {
      data,
      longitude: "",
      latitude: ""
    }
  },
  mounted() {
    var that = this;
    var wow = new WOW({
      boxClass: "wow", // animated element css class (default is wow)
      animateClass: "animated", // animation css class (default is animated)
      offset: 0, // distance to the element when triggering the animation (default is 0)
      mobile: true, // trigger animations on mobile devices (default is true)
      live: true, // act on asynchronously loaded content (default is true)
      callback: function (box) {
        // the callback is fired every time an animation is started
        // the argument that is passed in is the DOM node being animated
      },
      scrollContainer: null, // optional scroll container selector, otherwise use window,
      resetAnimation: true, // reset animation on end (default is true)
    });
    wow.init();
    setTimeout(() => {
      that.initQQMap();
    }, 100)
    // this.getEcharts()
  },
  computed: {},
  watch: {},
  methods: {
    initQQMap() {
      //定义地图中心点坐标
      var center = new TMap.LatLng(34.250152, 108.91082)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      var map = new TMap.Map(this.$refs.qqMap, {
        center: center,//设置地图中心点坐标
        zoom: 5,   //设置地图缩放级别
        pitch: 43.5,  //设置俯仰角
      });
      var flameList = [
        new Flame({
          map,
          position: new TMap.LatLng(36.361363, 98.093209), // 动态图放置位置
          url: mapicon1, // 路径
          width: 58, // 宽度
          height: 67, // 高度
        }), new Flame({
          map,
          position: new TMap.LatLng(25.343031, 118.109468), // 动态图放置位置
          url: mapicon1, // 路径
          width: 58, // 宽度
          height: 67, // 高度

        }), new Flame({
          map,
          position: new TMap.LatLng(23.388166, 110.382604), // 动态图放置位置
          url: mapicon1, // 路径
          width: 58, // 宽度
          height: 67, // 高度
        }),
        new Flame({
          map,
          position: new TMap.LatLng(41.196891, 88.08508), // 动态图放置位置
          url: mapicon2, // 路径
          width: 58, // 宽度
          height: 67, // 高度
        }),
        new Flame({
          map,
          position: new TMap.LatLng(42.134969, 112.148744), // 动态图放置位置
          url: mapicon2, // 路径
          width: 58, // 宽度
          height: 67, // 高度
        }),
        new Flame({
          map,
          position: new TMap.LatLng(25.810252, 100.227296), // 动态图放置位置
          url: mapicon2, // 路径
          width: 58, // 宽度
          height: 67, // 高度
        }),
        new Flame({
          map,
          position: new TMap.LatLng(29.47934, 95.591177), // 动态图放置位置
          url: mapicon3, // 路径
          width: 58, // 宽度
          height: 67, // 高度
        }),
      ];
    },
  },
}
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  position: relative;

  .mapbg {
    position: relative;
    height: 100%;
    width: 100%;
    background: url("../../../assets/mapbg.png") center center no-repeat;
    background-size: contain;
  }

  .qqMap {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .centerMap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
</style>