Echarts3.0 引入百度地图(转载)

时间 2020-05-25

标签 echarts3.0 echarts 引入百度地图转载繁體版

原文原文链接

转载来源: https://blog.csdn.net/yc_1993/article/details/52431989php

Echarts3.0引入百度地图

update:
因为目前echarts3.8.X比以前旧版改动较多，其实地图实例处许多朋友留言跑不通，今天更新下新版的作法，亲测已经能够。css

perface
一直抽不开身，留言区以及很多朋友都在问如何在Echarts3.0里引入百度地图，因为以前写的是Echart2.0如何引入，但2.0目前已再也不更新，因此这段时间断断续续研究了下，跟你们分享。
Echarts3.0采用标签引入，其相对而言比2.0的模块化引入更容易上手和配置。html

下面针对的是Echarts3.8.4（旧版的3.2.x之前版本再也不支持该作法），其下载地址为：http://echarts.baidu.com/download.html，测试尽可能选择源代码版本java

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 ）git

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的实例化语句，但愿能够帮到你们。

效果以下：
github

//可能问题

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 引入百度地图(转载)

Echarts3.0引入百度地图

1. 首先还是百度AK的申请，请参考 可视化篇：Echarts2.0引入百度地图 中的指引，或者直接用博主的密钥也能够（PS：公司尽可能本身申请同时增长配额）。

2. 下载bmap.js

3. 引入echarts.js 、bmap.js 以及AK

1. 首先还是百度AK的申请，请参考可视化篇：Echarts2.0引入百度地图中的指引，或者直接用博主的密钥也能够（PS：公司尽可能本身申请同时增长配额）。