轨迹图（一）

  view

引用百度API并建立密钥

我们这里因为用的是百度地图提供的服务，因此，使用的开发文档是百度的API，这里面集成了大量的与地图相关的服务。这个是开源的，免费的。但是想要使用的话，是需要在百度地图控制台申请一个本机的密钥。

1
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=密钥"></script>

引入相关js 文件

只有百度提供的API是不够的，还需要一些依赖包去满足更多的需求。

1
2
3
<script type="text/javascript" src="js/echarts3.8.5.min.js"></script>
<script type="text/javascript" src="js/bmap3.8.5.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>

如果是需要对地图有更多的要求，或者只是单纯对某一个地区进行操作，则需要引用其他的的js文件。

建立一个盒子接收

因为我们的地图是基于Html 进行的，因此需要一个div对获得数据进行接收。这里直接创建一个带有id属性的div即可。

1
<div id="allmap"></div>

编写JS文件

获得盒子

这里就是获得我们刚刚创建的div ,用来接收地图。

1
var myChart = echarts.init(document.getElementById('allmap'));

设置属性

接下来是对地图样式的设置，这里的内容是比较多的，也是需要后期继续学习与研究的，这里先简单的介绍一些比较简单的。

1
2
3
4
5
6
var bmap = {
        center: [startPoint.x, startPoint.y],
        zoom: 15,
        roam: true,
        mapStyle: {}
        }

上面为我们的地图样式提供了一个框架，第一个参数是我们第一次访问地图时候显示的中心位置，第二个参数是地图放大多少，第三个参数是指我们是否有权限自己调节大小,这里我们主要设置的是mapStyle的内容，也就是地图的样式，下面是几个实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
styleJson: [
               {
                   'featureType': 'land',     //调整土地颜色
                   'elementType': 'geometry',
                   'stylers': {
                       'color': '#081734'
                   }
               },
               {
                   'featureType': 'building',   //调整建筑物颜色
                   'elementType': 'geometry',
                   'stylers': {
                       'color': '#04406F'
                   }
               },
               {
                   'featureType': 'building',   //调整建筑物标签是否可视
                   'elementType': 'labels',
                   'stylers': {
                       'visibility': 'on'
                   }
               },
               {
                   'featureType': 'highway',     //调整高速道路颜色
                   'elementType': 'geometry',
                   'stylers': {
                       'color': '#015B99'
                   }
               },
               {
                   'featureType': 'highway',    //调整高速名字是否可视
                   'elementType': 'labels',
                   'stylers': {
                       'visibility': 'off'
                   }
                   ]

显示数据

最后，我们调整完所有的参数之后，读取一下我们的数据集，保存在一个列表里面，我们这里用series来表示。将我们的数据，设置到option里面。

1
2
3
4
5
6
option = {
       bmap: bmap,
       zoom: 13,
       color: ['gold', 'aqua', 'lime'],
       series:    series3
   };

最后调用函数，使用指定的配置项以及数据将地图显示出来。

1
myChart.setOption(option);

效果图

这里随便选取了家乡的几个点，作为测试，效果图如下：
在这里插入图片描述