1. 首先引入高德地图 我习惯在index.html中引入

几个点要注意:

1.AMapUI 组件库 虽然已经不维护了,但是我只用里面的方法获取数据 问题不大

2.key和安全密钥怎么获得可以登录高德控制台去申请

 <script src="https://webapi.amap.com/maps?v=1.4.15&key=XXXXX"></script>
 <script src="https://webapi.amap.com/ui/1.0/main.js"></script>
 <script>window._AMapSecurityConfig = {
   securityJsCode: "安全密钥"}</script>

2.获取echarts

可以去官网看具体的几种引入方法,这里只介绍其中一种 从 npm 获取

npm install echarts

3.渲染页面

第一步 获取初始化地图点位数据

第二步 渲染echarts地图

后续如果有点击省市下钻一样得获取边界方法以及地图样式等可自行调整

<template>
  <div class="map" id="map"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
   
  data() {
   
    return {
   
      charts: null,
    };
  },
  mounted() {
   
    this.initMapChart([100000]);
  },
  methods: {
   
    // 获取地图feature元素
    getMapFeatures(eChartsAreaNodes = []) {
   
      const allFeatures = [];
      eChartsAreaNodes.forEach((eAreaNode) => {
   
        const {
    subFeatures: features } = eAreaNode;
        allFeatures.push(...features);
      });
      return allFeatures;
    },
    // 获取地图指定区域坐标集合
    getMapJson(areaCode) {
   
      return new Promise((resolve) => {
   
        window.AMapUI.loadUI