echarts是标签式引入的,怎么扩展百度地图
发布网友
发布时间：2022-04-24 23:56
共1个回答
热心网友
时间：2022-04-22 13:08
百度API调用及echart库引入
1. 百度API ak申请：
http://lbsyun.baidu.com/apiconsole/key?application=key
api申请
为引入百度地图，需要申请自己的密钥，该密钥作为后面的src引入。
2. 申请认证企业信息：
http://lbsyun.baidu.com/apiconsole/auth ，配额增加申请。
配额增加
当然，如果个人用户，没必要增加配额，一般不会超*数。
3. 下载相关javaScript库：
jquery.min.js，require.js，echarts.js，这里我都已下载好，JQ用的是jQuery v1.10.2，require用的是RequireJS 2.2.0，echart用的是echarts-2.2.7，引入如下：
这里写图片描述
其中第二个 script 标签里对应的需换成申请的ak，example2.js对应为echart效果。
4. 百度地图额外依赖库main.js
main
这里模块化的引入对应文件夹下echarts文件，main.js存放于下载的echarts源码中的extension\BMap\src路径下，同时需引入其他echarts2的图形控件，在build\dist\chart路径，在该路径下对应有：
图形控件
需要时再引入即可，若无需其他可视化扩展，可删除除map.js外的其他js文件。
5. 为实例化百度地图背景构建一个容器：
实例化
Margin设为0则与浏览器无边界融合，div属性容器id，后面js脚本里需要用到该属性，并将echart填充到该容器里，当然，div可以有多个，故可以填充多个echart实例。实例化后再js脚本里调用echart api即可：
调用API
上图中的方法都封装在main.js中，使用的时候按上图调用即可，其中css样式对应之前的容器大小，BMapExt为初始化的地图对象，具体可看main.js源码，中间getMap,getEchartsContainer为获取地图实例及echart实例对象，BMap.Point是定义当前打开地图的中心点，最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。
