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> ...
随机推荐
- background-attachment属性
通过对background-attachment属性的学习,辨析每个属性值之间的区别. 1.fixed与scroll的区别 background-attachment:fixed;当滚动页面滚动条时背 ...
- MFC图片操作
根据MFC要操作图片的来源,可分为以下两类: 一.非动态显示图片(即图片先通过资源管理器载入,有一个固定ID) 二.动态载入图片(即只需要在程序中指定图片的路径即可载入) 一.非动态显示图片 1.传送 ...
- ORACLE知识点总结
一.ORACEL常用命令 1.解锁账户:ALTER USER username ACCOUNT UNLOCK; 2.查看数据库字符集:SELECT USERENV ('language') FROM ...
- 为什么delete指针后指针设为null(已解答)
int *p;/*........*/delete p; p=null; 看代码的过程中,有这么一个疑问.删除了指针p,指针p既是不存在,怎么还能设置指针p为null呢?为什么还要设置为null呢? ...
- html5 css选择器。 井号，句号的区别
.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成:1.选择器(如下面例子中的:“body”),告诉浏览器文档的哪个部分受规则影响:2.属性(如实例中的font-family ...
- JavaScript 高性能数组去重
中午和同事吃饭,席间讨论到数组去重这一问题 我立刻就分享了我常用的一个去重方法,随即被老大指出这个方法效率不高 回家后我自己测试了一下,发现那个方法确实很慢 于是就有了这一次的高性能数组去重研究 一. ...
- SpringMVC框架三：参数绑定
这篇文章整合了SpringMVC和MyBatis: https://www.cnblogs.com/xuyiqing/p/9419144.html 接下来看看参数绑定: 默认Conrtroller可以 ...
- 应用监控CAT之cat-consumer源码阅读（二）
之前讲了 cat-client 进行cat埋点上报,那么上报给谁呢?以及后续故事如何?让我们来看看 cat-consumer 是如何接收处理的? 由cat-client发送数据,cat-consume ...
- Kubenetes---Service--实践
1,编写创建svc的yaml文件 2, 创建service 3, 查看 4,查看svc代理那些pod , 当前没有 先创建deployment --> service 查看pod的label信 ...
- JDK下载API文档
JDK官方下载 JDK1.5 : http://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-Site/en_US/-/USD ...