Echarts3.0 引入百度地图(转载)
转载来源: https://blog.csdn.net/yc_1993/article/details/52431989
Echarts3.0引入百度地图
update:
由于目前echarts3.8.X比之前旧版改动较多，其实地图实例处许多朋友留言跑不通，今天更新下新版的做法，亲测已经可以。perface
一直抽不开身，留言区以及不少朋友都在问如何在Echarts3.0里引入百度地图，由于之前写的是Echart2.0如何引入，但2.0目前已不再更新，所以这段时间断断续续研究了下，跟大家分享。
Echarts3.0采用标签引入，其相对而言比2.0的模块化引入更容易上手和配置。
下面针对的是Echarts3.8.4（旧版的3.2.x以前版本不再支持该做法），其下载地址为：http://echarts.baidu.com/download.html，测试尽量选择 源代码 版本
1. 首先仍是百度AK的申请，请参考 可视化篇：Echarts2.0引入百度地图 中的指引，或者直接用博主的密钥也可以（PS：公司尽量自己申请同时增加配额）。
2. 下载bmap.js
bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’
下载地址为：https://github.com/ecomfe/echarts ，GitHub上echarts源代码中路径为 dist/extension/bmap.min.js，旧版百度网盘版本不再支持该版本（ http://pan.baidu.com/s/1hrPEdGK ）
3. 引入echarts.js 、bmap.js 以及AK
update:
引入的同时为echarts也新建了个容器：<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {
margin: 0;
}
#main {
height: 100%;
}
</style>
</head>
<body>
<div id="main"></div>
<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
<script src="./echarts/echarts.js"></script>
<script src="./js/bmap.min.js"></script>
<script src="./js/example.js"></script>
</body>
</html>其中example.js为echarts测试样例，如下：
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
bmap: { //设置百度地图显示哪些东西
center: [120.13066322374, 30.240018034923],
zoom: 14,
roam: true,
mapStyle: {
styleJson: [
{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
},
{
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
},
{
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
},
{
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color':'#003051'
}
},
{
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
},
{
'featureType': 'subway', //调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
},
{
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
}
},
{
'featureType': 'all', //调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
}
},
{
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
},
{
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
}
},
{
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
}
},
{
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
}
}]
}
},
series: [{
type: 'scatter',
coordinateSystem: 'bmap',//设置为bmap
data: [ [120, 30, 1] ]
}]
});
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());其中series.map中，我们就可以直接把coordinateSystem设置为bmap了，如此3就算引入成功了（是不是感觉很简单？）。
update: 此处新版需要加入最后bmap的实例化语句，希望可以帮到大家。效果如下：
我的echarts3某个版本写这两行代码反而报错，删除仍然可以正常运行，可能有版本问题。var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());2）map类型和百度地图无法互动
type: 'map', //类型为map
coordinateSystem: 'bmap',//此时会报错，查看文档发现 map类型无此配置。 删除后发现map类型和百度地图无法互动，例如拖拽和放大不能同步。
目前尚未找到map和百度地图共用的案例，建议
1更新到最高版本试试（ehcarts 和bmap）；
2查看百度地图api；
3 采用替代方案。
百度地图说明文档 http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
类似案例 http://www.mamicode.com/info-detail-2244331.html
一个问题 https://www.oschina.net/question/2305015_220916 网盘：http://pan.baidu.com/s/1gdybVGZ
全国省市json文件 https://www.cnblogs.com/carsonwuu/p/8566621.html Github： https://github.com/carsonWuu/echartJs/tree/master/ECharts_%E5%9C%B0%E5%9B%BE
Echarts3.0 引入百度地图(转载)的更多相关文章
- 单页面应用（spa）引入百度地图（Cannot read property 'dc' of undefined）
难点介绍 引入百度地图的时候,用原生的获取不到dom节点. ( var mapEle = document.getElementById(testApi): var map = new BMap.Ma ...
- react 引入 百度地图API
使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...
- react项目中引入百度地图打包报错问题
一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...
- 解决Vue引入百度地图JSSDK：BMap is undefined 问题
百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...
- android引入百度地图之最简单的例子-HelloBaiDuMap
开发工具 我用的是eclipse,目前这是开发android用的最多的一个工具. 开发准备 首先需要在百度地图开发平台上下载所需要的文档和功能,由于最新版的3.0.0的不是很熟悉,我这里用的是稍旧一点 ...
- 【php增删改查实例】第二十二节 - 引入百度地图
20．用户新增地址字段 在实际的开发中,经常会出现对数据表新增或者修改字段的事情,所以,当用户提出加字段的需求时,我们的页面以及后台程序都要进行相应的改动. 本节就以增加一个地址字段为例. 打开nav ...
- 页面中引入百度地图，实例化后影响html5的表单元素date的上下箭头
复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...
- Vue项目引入百度地图
先去百度开放平台申请ak.http://lbsyun.baidu.com/ 进来之后 按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥 填写完毕后提交,会给你邮箱发个激活邮件 点击申请 ...
- vue中引入百度地图
xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...
随机推荐
- python3+redis问题求解
学生管理系统 更新学生信息没做出来,找个大神补全下.谢谢. # 记录: # bug:操作后若退出需要两次退出才行. 待修复 # 下一步:链接redis进行使用. # 更新学生库信息 待完成 imp ...
- java holdsLock()方法检测一个线程是否拥有锁
http://blog.csdn.net/w410589502/article/details/54949506 java.lang.Thread中有一个方法叫holdsLock(),它返回true如 ...
- 本学期Windows编程微型技术博客上线！
将两篇报告生成超链接模式方便阅读,以下为链接: https://files.cnblogs.com/files/Kitty-/Windows编程微型技术报告一.pdf https://files.cn ...
- CentOS7 openssh7.9p1安装
先安装telnet,以防安装ssh出现问题,无法远程登录设备. 最新版openssh下载地址:http://www.openssh.com/ftp.html 一.安装telnet和xinetd: 1. ...
- MFC之几类消息的区别
1.ON_COMMAND与ON_UPDATE_COMMAND_UI 开发MFC程序,给菜单子项添加消息处理函数时,会碰到ON_COMMAND和ON_UPDATE_COMMAND_UI两个消息. ON_ ...
- [转]Ubuntu Precise - Install youtube-dl package using Quantal repo
Ubuntu Precise - Install youtube-dl package using Quantal repo Ubuntu Precise 12.04 currently contai ...
- 【腾讯Bugly干货分享】人人都可以做深度学习应用：入门篇
导语 2016年,继虚拟现实(VR)之后,人工智能(AI)的概念全面进入大众的视野.谷歌,微软,IBM等科技巨头纷纷重点布局,AI 貌似将成为互联网的下一个风口. 很多开发同学,对人工智能非常感兴趣, ...
- ZKWeb网页框架2.2正式发布
2.2.0更新的内容有 重构依赖注入容器 使用无锁算法 (可能导致不兼容) 使用 ContainerFactoryData 创建实例 (可能导致不兼容) 删除静态的 ContainerFactoryC ...
- Android 视频播放器 (一)：使用VideoView播放视频
一.简介 作为Android开发,我们不可避免的会接触到视频播放,VideoView做为最简单的播放器,我们是不应该不会的. 下面简单介绍一下VideoView: VideoView是使用MediaP ...
- Java学习图