vue 腾讯地图 -- 海量点文字显示（Label）

不多说直接上代码

首先在 index.html 引用脚本文件

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

把下面代码粘贴到vue页面：

<template>
   <div>
    <!-- 定义地图显示容器 -->
    <div id="allMap"></div>
  <div>
</template>
<script>
export default {
  data(){
    return {
      map:{}
    }
  },
  mounted() {
    this.createMap();
    this.getDatalist()
  },
  methods: {
    createMap(){
      this.map = new qq.maps.Map(document.getElementById("allMap"), {
      center: new qq.maps.LatLng(24.492304,118.137935),
      zoom: 12,
      mapStyleId: 'style2',
      zoomControl: false,
      scaleControl: false,
      panControl: false,
      mapTypeControl: false,
      noClear: true
      });
    },
    getDatalist(){
      getData("接口地址").then(res => {
        let data = res.data.data;
        let css={color:"#666",fontSize:"14px",fontWeight:"normal",border:'1px solid #fdaa03',background:'#FFCC00',borderRadius:'8px'};
        for (let i=0;i<data.length;i++){
        let content = new qq.maps.Label(data[i].name, new qq.maps.Point(0, -5));
        let marker= new qq.maps.Label({
        map: this.map,
        position:new qq.maps.LatLng(data[i].lat, data[i].lng),  //点标记坐标位置
            content:data[i].name,
        })
        marker.setTitle(data[i].name);
        marker.setStyle(css);
        }
      })
    }
  },
  computed: {}
}
</script>