转载来源: 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的实例化语句,希望可以帮到大家。

效果如下: 

  //可能问题
   1)我的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 引入百度地图(转载)的更多相关文章

  1. 单页面应用(spa)引入百度地图(Cannot read property 'dc' of undefined)

    难点介绍 引入百度地图的时候,用原生的获取不到dom节点. ( var mapEle = document.getElementById(testApi): var map = new BMap.Ma ...

  2. react 引入 百度地图API

    使用 Echarts 的地图的时候,发现报错,说 Bmap api is not loaded 百度地图API没有加载 乍一想,Echarts 用的也是 百度地图 啊,没有引入百度地图,还用个啥,当然 ...

  3. react项目中引入百度地图打包报错问题

    一.我正常引入百度地图,调试时候是好使的,但是打包时候就报错 引入方法如下: 报错如图 正常调试是好使的,但是打包报这个错,解析不了这个BMap,那么怎么办呢? 然后我就转用了window办法,虽然因 ...

  4. 解决Vue引入百度地图JSSDK:BMap is undefined 问题

    百度地图官网文档介绍使用JSSDK时,仅提供了2种引入方式: script引入 异步加载 解决跨域问题,实例调用百度地图 但vue项目中仅某一两个页面需要用到百度地图,所以不想在 index.html ...

  5. android引入百度地图之最简单的例子-HelloBaiDuMap

    开发工具 我用的是eclipse,目前这是开发android用的最多的一个工具. 开发准备 首先需要在百度地图开发平台上下载所需要的文档和功能,由于最新版的3.0.0的不是很熟悉,我这里用的是稍旧一点 ...

  6. 【php增删改查实例】第二十二节 - 引入百度地图

    20.用户新增地址字段 在实际的开发中,经常会出现对数据表新增或者修改字段的事情,所以,当用户提出加字段的需求时,我们的页面以及后台程序都要进行相应的改动. 本节就以增加一个地址字段为例. 打开nav ...

  7. 页面中引入百度地图,实例化后影响html5的表单元素date的上下箭头

    复现步骤: 使用百度地图的JavaScript的API,引入文件地址"http://api.map.baidu.com/api?key=&v=1.1&services=tru ...

  8. Vue项目引入百度地图

    先去百度开放平台申请ak.http://lbsyun.baidu.com/ 进来之后 按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥 填写完毕后提交,会给你邮箱发个激活邮件 点击申请 ...

  9. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

随机推荐

  1. Jupyter-NoteBook-你应该知道的N个小技巧

    智能决策上手系列教程索引 不断更新部分内容来自于翻译整理 多行输出 在Notebook的中开头cell中添加以下代码可以实现多行输出: from IPython.core.interactiveshe ...

  2. Node.js 开发指南

    1.Node.js 简介 Node.js 其实就是借助谷歌的 V8 引擎,将桌面端的 js 带到了服务器端,它的出现我将其归结为两点: V8 引擎的出色: js 异步 io 与事件驱动给服务器带来极高 ...

  3. finalize方法的使用

    finalize()是在java.lang.Object里定义的,也就是说每一个对象都有这么个方法.这个方法在gc启动,该对象被回收的时候被调用.其实gc可以回收大部分的对象(凡是new出来的对象,g ...

  4. [转] 如何用kaldi训练好的模型做特定任务的在线识别

    转自:http://blog.csdn.net/inger_h/article/details/52789339 在已经训练好模型的情况下,需要针对一个新任务做在线识别应该怎么做呢? 一种情况是,用已 ...

  5. 一次艰难debug的反思

    已经很久没有遇到如此顽固的bug了,总共耗费了我近1个礼拜的时间.期间的种种冲突,个人崩溃,最终解决方案的形成,到回过头来的反思,实在有太多值得梳理的东西. 从结果上来讲,这是个人js基础极端薄弱的集 ...

  6. 【Node100In1】01.去异步,解决掉Node.js万恶的回调陷阱

    Node.js是基于事件驱动编程.异步函数随处可见,其中不乏一些常用库的方法.本例就以js中最常见的setTimeout的为例,试图改善一下回调的书写. 先来看一段伪代码: 我们实现一个需求,每隔一段 ...

  7. Pycharm Debug调试心得

    1.操作步骤: 1-1.添加断点:直接在标记处点击鼠标左键即可.(删除断点只需再点击断点处即可) 1-2.Debug下运行代码 1-3.按照所需调试进行代码调试.Debug的调试方式如下所示: 分别为 ...

  8. maven安装和四大特性

    一.安装配置maven 官网下载:http://maven.apache.org/download.html 1:解压后放在一个固定的位置 2:配置环境变量,具体如下 新建系统环境变量:MAVEN_H ...

  9. MySQL:刷脏页

    1. 脏页,干净页 当内存数据页和磁盘数据页上的内容不一致时,我们称这个内存页为脏页: 内存数据写入磁盘后,内存页上的数据和磁盘页上的数据就一致了,我们称这个内存页为干净页. 2. 刷脏页的时机 2. ...

  10. ubuntu 16.04 安装matlab的替代工具Octave及使用指南

    为什么要安装Octave? 它是什么? GNU Octave是自由软件基金会(Free Software Foundation)支持的遵循GPL协议(GNU General Public Licens ...