vue echarts实现地图

这篇文章主要是说明怎么实现vue+echarts实现地图的，一些基础的API建议去查阅echarts官方文档，这里主要说明怎么获取地图数据并应用数据生成地图，实现一些常见的交互操作

echarts常见配置项

官网：https://echarts.apache.org/zh/index.html

• 如果是options中的一些基础配置项，直接查阅官网-文档-配置项
• 如果是事件events和action，查阅官网-文档-API

地图geoJson下载地址

• 下载地址（可以下载svg或json格式的地图数据）：http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5
  将下载后的json文件放置/public目录下

map类型地图

geo类型地图

geo类型其实和map差不多，区别在于它可以绘制散点和线集，还支持轨迹动画

坑

• 报错："export 'default' (imported as 'echarts') was not found in 'echarts'
  原因：echarts v5版本不再是用默认导出的方式，所以import echarts from 'echarts'方式报错
  解决：npm unstaill echats npm install [email protected]
  或者：使用5版本的写法-- import * as echarts from 'echarts';

• TypeError: coordSys.getBaseAxis is not a function
  series中的type写错了，把lines写成了line，改过来就好

百度地图

官网：http://lbsyun.baidu.com/

开发文档-web开发-javascript开发：

入门指南：

1. 注册百度账号-登录
2. 申请成为百度开发者
3. 获取密钥：应用名称（任意取），应用类型：浏览器端，白名单：*，提交即可
4. 复制AK

查看hello world: 引用百度API的方法，直接在html中单独使用百度地图：

在echarts中引用百度地图

参考：https://blog.csdn.net/yiyueqinghui/article/details/106424482
https://blog.csdn.net/Fimooo/article/details/102948186?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.nonecase

// getBMapApi.js
export function loadBMap(ak) {
  return new Promise(function(resolve, reject) {
      if (typeof BMap !== 'undefined') {
          resolve(BMap)
          return true
      }
      window.onBMapCallback = function() {
          resolve(BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src =
          'http://api.map.baidu.com/api?v=2.0&ak='+ ak +'&__ec_v__=20190126&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
  })
}

坑

1. BMap api is not loaded
   原因：在mounted初始化地图的时候，因为异步问题会导致BMap is not defined，也就是百度的api还没完全引入或者加载完成，就已经进行地图初始化了
   参考：https://www.cnblogs.com/menxiaojin/p/13613607.html

2. 设置mapStyle个性化样式不生效：待解决