Echarts3.0引入百度地图-简单说

1. 首先是百度AK的申请

2. 下载bmap.js echarts.js

bmap.js 是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’
下载地址为：https://pan.baidu.com/s/1o8MB98I

下面针对的是Echarts3.0 下载地址为：http://echarts.baidu.com/download.html，开发测试选择源代码版本

3. 引入echarts.js 、bmap.js

引入的同时为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="./echarts/echarts.js"></script><script src="./js/bmap.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script><script src="./js/example6.js"></script></body>
</html>

其中example6.js为echarts测试样例，如下：

var myChart = echarts.init(document.getElementById('main'));var option = {bmap: {center: [113.65,34.76],zoom: 5,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: 'map',mapType: 'china',coordinateSystem: 'bmap'}]};
myChart.setOption(option);

其中series.map中，我们就可以直接把coordinateSystem设置为bmap了，引入成功了。

Echarts3.0引入百度地图-简单说相关推荐

可视化篇：Echarts3.0引入百度地图（更新）
update: 由于目前echarts3.8.X比之前旧版改动较多,其实地图实例处许多朋友留言跑不通,今天更新下新版的做法,亲测已经可以. perface 一直抽不开身,留言区以及不少朋友都在问如何在 ...
可视化篇：Echarts2.0引入百度地图
写在最前 Echarts作为百度团队下一个可视化的js库,自2.0更新至3.0以来,其带来的视觉冲击更加强悍,数据可视更加精美,图形交互更加贴合用户. 由于echarts2在百度地图的实例上没有作过多 ...
可视化篇：Echarts2.0引入百度地图(转载)
原链接:https://blog.csdn.net/yc_1993/article/details/51367575?spm=1001.2014.3001.5501 写在最前 Echarts作为百度团 ...
vue3.0引入百度地图并标记点
首先新建一个js,主要用来引入百度地图的js,代码如下: export function baiduMap() {return new Promise(function(resolve, reject ...
javaswing引入百度地图_【react】React怎么引用百度地图
前期准备:在百度地图开发文档中申请秘钥,申请流程按照网上的攻略走很简单的几个步骤 (如果项目紧急也可以私信找我要我的秘钥) 官网http://lbsyun.baidu.com/ index.html文 ...
html引入百度地图报错,vue引入百度地图BMapGL，或者其他个性化地图
3.jpg vue的百度地图早就有vue-baidu-map这里就不赘述了, 自己去直接对着API写就好了,基本上已经满足绝大多数需求了还简单方便. vue-baidu-map 传送门 https:/ ...
Vue使用v-charts引入百度地图实现数据可视化
上一篇文章给大家介绍了vue-echarts引入百度地图的过程, 今天给大家介绍通过v-charts来写一个简单的地图,相比之下过程更为简单,下面一起来看看具体步骤介绍 v-charts 是饿了么团 ...
vue+element中引入百度地图
❤️❤️❤️ Topology可视化绘图引擎 ❤️❤️❤️ 前言: 您好,我是csdn-尔嵘,如果您需要雨伞,可以去TaoBao搜:华,诚,荣,邦,百,货谢谢您的支持! 1.首先你需要下载npm模 ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...

Echarts3.0引入百度地图-简单说

1. 首先是百度AK的申请

2. 下载bmap.js echarts.js

3. 引入echarts.js 、bmap.js

Echarts3.0引入百度地图-简单说相关推荐

最新文章

热门文章