vue框架下echarts导入地图和调用百度地图接口

Posted 2020-12-15 linjieblog

vue框架下echarts导入地图和调用百度地图接口的一些帮助和介绍

概述：主要是在vue框架下导入地图（全国地图和百度地图），因为自己在团队项目中负责的就是前端的地图功能页面，同时尽量按照原型设计的完成。

一. 在vue框架下导入中国地图及下钻到各省市地图

• 第一步需要下载echarts插件，需要命令窗口cd到项目根目录下，执行cnpm install echarts --save-dev的命令。

• 第二步在在main.js中全局引入

• 第三步创建echares组件：具体代码参考链接
  https://www.cnblogs.com/ldlx-mars/p/9242250.html

• 第四步实现地图下钻到具体省市。
  需要进行具体的配置，代码和配置参考链接
  https://www.cnblogs.com/ryanchong/p/13031866.html

二. 在vue框架下调用百度地图api

• 步骤一：申请百度地图密钥；
  申请过程比较简单，有一个具体的教程链接：
  https://jingyan.baidu.com/article/e73e26c0b5b75124adb6a786.html

• 步骤二：在index.html中添加百度地图javascript API接口；

在密钥位置填入你申请的密钥

• 步骤三：在webpack.base.conf.js配置文件中配置BMap

• 步骤四：在地图组件中import BMap

• 步骤五：创建地图对象，在mounted生命周期调用；
  具体代码参考链接
  https://www.jb51.net/article/160224.htm

这样就完成了在vue框架下的百度地图api的调用，然后使用vue中的路由跳转和动态传参就可以实现具体的中国地图跳转百度地图了。

一些有用的参考链接：

百度地图开发平台:http://lbsyun.baidu.com/

Vue官网:https://cn.vuejs.org/

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