在Vue里使用G2地图制作省级地图展示各市级数据

制作效果

省级地图

一、相关依赖
1、npm安装G2

npm install @antv/g2 --save

2、npm安装data-set

npm install @antv/data-set --save

3、npm安装jquery

npm install jquery --save

4、npm安装lodash

npm install lodash --save

二、视图层代码

<template>
  <div>
    <div style="position: relative;">
      <div id="china" style="display: none;width: 50%;height:400px;position: absolute;left: 0;top: 0;"></div>
      <div id="province" style="width: 50%;height:400px;position: absolute;right: 0;top: 0;"></div>
    </div>
  </div>
</template>

三、JS代码

import $ from 'jquery';
import _ from 'lodash';
import G2 from '@antv/g2';
const DataSet = require('@antv/data-set');

export default {
  mounted() {
    $.getScript('https://webapi.amap.com/maps?v=1.4.1&key=0d78256ea89beeb8c25d1cd047549d1f')
    .then(()=>$.getScript('https://webapi.amap.com/ui/1.0/main.js?v=1.0.11'))
    .then(()=>{
      // 调用高德 api 绘制底图以及获取 geo 数据
      var map = new AMap.Map('china', {
        zoom: 4
      });
    //.......这里省略官网案例代码
    })
  }
}

注：
1、JS部分只举例了一小部分代码，完整代码可到G2官网地图案例查找：http://antv.alipay.com/zh-cn/g2/3.x/demo/map/drill-down.html
2、如案例运行报有关eslint错误，可关闭eslint。
3、这里把import * as $ from 'jquery'改为了import $ from 'jquery'因为运行时报$ not defined。

这里还有个自己添加的代码：

点击事件获取数据

添加自定义数据：

添加数据

整个案例是自己第一次尝试在Vue里使用G2地图，在网上没有看到相关完整案例所以分享出来供大家参考，如有不错误还请指正！