echarts+vue实现高德地图显示

1.效果图

 2、创建好Vue项目后导入echarts
2.1、npm install amap-echarts
2.2、npm install echarts

3、在index.html中导入从高德地图API官网申请的Key值

高德API官网：高德开放平台 | 高德地图API高德开放平台官网https://lbs.amap.com/

 <script src="https://webapi.amap.com/maps?v=1.4.15&key=key值"></script>

4、新建Vue页面

<template>
  <div class="map-container">
      <!-- 地图   -->
      <div class="box">
          <div id="container">

          </div>
      </div>
  </div>
</template>

5、页面的js样式

<script>
    export default {
        name: "about", 
        data() {
          return {
            map: null,
            heatmap: null
          }
        },methods:{
        initMap() {
        this.map = new AMap.Map("container", {
          visible: true,
          resizeEnable: true,
          //地图中心点位置坐标系
          center: [116.480983, 39.989628],
          zoom: 11,
          mapStyle: 'darkblue', 
          //自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
        });
        //地图初始化之后想要修改地图的主题
        this.map.setMapStyle('amap://styles/darkblue');

      },
      
      isSupportCanvas() {
        let elem = document.createElement("canvas");
        return !!(elem.getContext && elem.getContext("2d"));
      },
      createHeatMap() {
        if (!this.isSupportCanvas()) {
          return this.$message({
            message: '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请个浏览器试试。',
            type: 'warning'
          });
        }
        let __this = this;
        this.map.plugin(["AMap.Heatmap"], function () {
          //初始化heatmap对象
          __this.heatmap = new AMap.Heatmap(__this.map, {
            radius: 25, //给定半径
            opacity: [0, 0.8],
            visible: true
          });
          //设置数据集：该数据为北京部分“公园”数据
          __this.heatmap.setDataSet({
            data: heatmapData,
            max: 100
          });
        });
      }
         },, mounted() {
      setTimeout(() => {
        this.initMap();
        this.createHeatMap();
      }, 1000);
      let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
        _this.date = new Date(); // 修改数据date
      }, 1000)
    }

    }
</script>