Echarts3.0引入百度地图

53 阅读 0 评论 35 点赞

我是靠谱客的博主暴躁外套，最近开发中收集的这篇文章主要介绍Echarts3.0引入百度地图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最新项目需要引用echarts里面的一个地图例子，按照官网引入之前是报错series.custom不存在，找了半天是因为我们项目中的echarts不是最新的，只有3.6.0以上的才支持custom，后来引入了最新的之后，会报错api.coord is undefined。这个原因就找了很有一段时间了，全是按照官网引用的啊，咋会报这错呢，后来也是在网上找到的，因为没有下载bmap.js ,bmap.js是一个基于echart3的百度地图扩展文件，将其引入后可以在echarts.series.map.coordinateSystem 中直接使用参数’bmap’,

下载地址为：https://github.com/ecomfe/echarts ，GitHub上echarts源代码中路径为 dist/extension/bmap.min.js，下好了直接在引入echarts之后引用就行了，由于echarts3的地图是以百度地图为底图的形式，所以在这之前还需要引入百度地图的。那么echart3 引入百度地图的具体步骤就是：

1、首先仍是百度AK的申请（PS：公司尽量自己申请同时增加配额）。

2、下载bmap.js

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

参考代码如下：

<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=你的密钥"></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',
data: [ [120, 30, 1] ]
}]
});
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());

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

echart3确实很好用，但是真的有必要吐槽一下官网的地图下载，就这么随便丢个demo链接给你，需要引入哪些东西也没有任何说明，这很“开局给你一个链接，剩下全靠自己百度”。