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> ...
随机推荐
- react native (2) 嵌入h5页面 设置顶部导航
嵌入h5页面 1.新建好页面 2. import { WebView } from 'react-native'; 3.<WebView source={{ uri: '要引入的页面路径' }} ...
- 28.实现 strStr() 函数
28.实现 strStr() 函数 给定一个 haystack 字符串和一个 needle 字符串,在 haystack 字符串中找出 needle 字符串出现的第一个位置 (从0开始).如果不存在, ...
- 最强大的跨语言调用生成工具：Swig 快速实用教程
swig是一个生成其他高级语言调用c和C++代码的工具,比如,大家都知道java的jni,可能没写过,因为非常麻烦,swig可以帮助生成这样的代码,编译生成的代码后,它会生成java类和c代码文件.分 ...
- MySQL9：索引实战
索引 无论是面试,还是实际工作中,对于一个Java程序员来说,数据库优化是避不开的一个技术点,关于数据库的优化,在性能达不到要求的情况下,我大致给出以下几个方向: (1)优化表结构,对常用字段和非常用 ...
- Linux系统安装Mysql5.7
1.下载tar包,这里使用wget从官网下载 wget https://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.22-linux-glibc2. ...
- Git使用详细教程(7)：.gitignore使用详解
Git提供了一个.gitignore文件,帮助我们忽略掉一些不想或者不能提交到版本控制器中的文件.这个文件的使用时必须要掌握的. *.a # 忽略所有目录下的.a结尾的文件 !lib.a # 但lib ...
- [Swift]在Swift项目中创建桥接头文件，Swift文件和Objective-C文件相互调用
创建一个Swift项目[demo],以下内容Swift文件和Objective-C文件相互调用都是在Swift项目中. 一.Swift文件调用Objective-C文件 新建文件夹[SupportFi ...
- 随手用python写一个下载jdk源码爬虫
最近在研读jdk源码,网上找了下资源,发现都不完整. 后来新发现了一个有完整源码的地方,主要包括了java,c,c++的东西,装逼需要,就想拿来玩玩.但是,找了好多种下载打开的方式,发现都不对.于是, ...
- openfire的SSL双向认证增加android客户端证书库步骤
过程 需要新制作PKCS12证书库.CER证书.转换为androidBKS证书,最后把客户端的CER证书导入进im服务器的私钥库client.truststore,然后替换原证书. 新证书生成步骤 ...
- app开发中，前后端使用AES进行数据加密传输
问题:当数据调用没有使用https加密时,app被抓包,接口暴露,此时可能导致被刷等安全问题 解决:1. 使用https传输 2. 在进行数据传输时进行手动加密(app端和后端定义统一的加密方式),这 ...