004-地图

百度地图 - - 结合echarts实现数据展示

实现效果图：

1. 引入第三方插件包
   百度地图API： http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/getkey
   echarts官网：https://echarts.baidu.com/option.html#title

   <script src="./jquery-1.12.2.js"></script>
   <!--引入百度地图，ak秘钥自己去百度API申请-->
   <script src="http://api.map.baidu.com/api?v=2.0&ak=百度秘钥"></script>
   <!-- 引入 ECharts -->
   <script src="./echarts.js"></script>
   <!-- 引入百度地图扩展 -->
   <script src="./bmap.js"></script>
   

2. 获取部分公交线路数据，组成json文件

     // 创建地图实例，container为地图div盒子的id
     var map = new BMap.Map("container");
     // 设置地图中心点和缩放级别
     map.centerAndZoom(new BMap.Point(108.843291, 34.214095), 12);
   
     // 获取公交线路
     var busline = new BMap.BusLineSearch(map, {
         renderOptions: {},
         onGetBusListComplete: function (result) {
             if (result) {
                 var BusItem = result.getBusListItem(0);
                 busline.getBusLine(BusItem);
             }
         },
         onGetBusLineComplete: function (BusLine) {
             if (BusLine) {
                 //获取到具体的公交对象
                 var arr = [];
                 for (var i = 0; i < BusLine.Ti.ia.length; i++) {
                     arr.push([BusLine.Ti.ia[i].lng, BusLine.Ti.ia[i].lat]);
                 }
                 // 数据
                 console.log(JSON.stringify({
                 	// 根据echarts多线图配置所需要的配置项
                     "coords": arr,
                     "lineStyle": {
                         "normal": {
                             "color": "rgba(90,221,223,1)"
                         }
                     }
                 }));
             }
         }
     });
   
     //将获取的json文件暂存
     busline.getBusList('900');
     	
     // 获取多个公交线路
     // 将控制台打印的多条公交线路复制到json文件中，组成一个数组
   
     ...
   

3. 创建 echarts 实例，将json数据加载到echarts图表中，效果展示如图所示

   function mapChart(id, data) {
   	// 创建echarts实例
       var myChart = echarts.init(document.getElementById(id));
       var options = {
           bmap: {
           	// 地图展示的中心点
               center: [108.954248, 34.276169],
               // 地图缩放级别
               zoom: 12,
               // 开启地图缩放、平移
               roam: true,
               mapStyle: {
                   styleJson: [
                   	// 此处为自定义地图样式，更多配置项参考百度地图API
                   ]
               }
           },
           series: [{
           	// 创建多线图
               type: 'lines',
               // 使用百度坐标
               coordinateSystem: 'bmap',
               polyline: true, //是否多线段
               data: data,
               silent: true, // 图形是否不影响触发鼠标事件
               lineStyle: {
                   normal: {
                       opacity: 0.2,
                       width: 1
                   }
               },
               tooltip: {
                   show: false
               },
               progressiveThreshold: 500, //单系列图形数量超过该阈值时，使用渐进式渲染
               progressive: 100 // 渐进式渲染每帧绘制图形数量
           }, {
               type: 'lines',
               coordinateSystem: 'bmap',
               polyline: true,
               data: data,
               silent: true, // 图形是否不影响触发鼠标事件
               lineStyle: {
                   normal: {
                       width: 0.3
                   }
               },
               tooltip: {
                   show: false
               },
               effect: {
                   constantSpeed: 10, // 特效图形移动动画是否是固定速度
                   show: true,
                   trailLength: 0.05, // 特效尾迹长度
                   // 图标，及图标大小大家可以自行搜索
                   symbol: 'image://gongjiaoche.png',
                   symbolSize: [16, 20], // 特效标记大小
               },
               zlevel: 1
           }, {
            // 气泡涟漪图
               type: 'effectScatter',
               coordinateSystem: 'bmap',
               rippleEffect: {
                   scale: 5
               },
               itemStyle: {
                   normal: {
                       color: '#f00',
                       shadowBlur: 10,
                       shadowColor: '#333'
                   }
               },
               data: [{
                   name: '123',
                   // 气泡图地图位置与大小
                   value: [109.023383, 34.257195, 10]
               }]
           }]
       };
       myChart.setOption(options);
       return myChart;
   }
   
   // 通过请求json文件，获取data数据；
   $.ajax({
       url: './data.json',
       type: 'get',
       success: function (data) {
       	// 创建echarts实例对象
           var xianMapChart = mapChart('baiduMap', data);
   
           //根据echarts获取地图对象
           var xianMap = xianMapChart.getModel().getComponent('bmap').getBMap();
   		// 地图禁止拖拽
           xianMap.disableDragging();
   		// 地图禁止平移缩放
           xianMap.disableScrollWheelZoom();
           
   		// 地图点击事件，比如：可以获取地图某一点的坐标位置
           xianMap.addEventListener('click', function (e) {
   
               console.log(e.point.lng, e.point.lat);
   
           });
       }
   })
   

4. 鉴于心急的小伙伴可能想直接看效果，笔者将代码放置百度网盘，地址： https://pan.baidu.com/s/15LUxx5RmJ22GBcYNMbeK5w 提取码： u863，将代码里面的百度地图秘钥替换为自己的即可；
5. 百度地图总结：
   使用百度地图可以结合echarts多线图、气泡图等实现更炫酷的大数据展示，百度地图常用的功能有：添加点标记、添加遮罩层、轨迹绘制等；

高德地图 - - 最友好的地图

1. 效果图：
   
2. 初始化高德地图
   高德地图API： https://lbs.amap.com/api/javascript-api/summary

   <div id="gaodeMap"></div>
   <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=秘钥自己申请哦">
   <script>
   // new 地图实例
    var map = new AMap.Map('gaodeMap', {
    	 //监控地图容器尺寸变化
        resizeEnable: true,
        // 自定义地图样式
        mapStyle: "amap://styles/7c13eb0af6a645ee3c9fb2fc4e671f05",
        //是否支持可以扩展最大缩放级别
        expandZoomRange: true,
        // 地图缩放
        zooms: [15, 24],
        //地图中心点
        center: [108.836938, 34.207766],
        //地图是否可旋转
        rotateEnable: true,
        rotation: 0
    });
    </script>
   

3. 高德地图添加自定义点标记

    // 添加点标记
       function addMarker(map, posArr, isSelf, icon, text) {
           var myIsSelf = isSelf || false;
           if (!myIsSelf) {
               var marker = new AMap.Marker({
               	//图标
                   icon: icon || "https://webapi.amap.com/images/car.png",
                   // 图标中心偏移量
                   offset: new AMap.Pixel(-26, -13),
                   // 图标是否根据路线自动旋转
                   autoRotation: true,
                   angle: -90,
                   position: posArr || [116.405467, 39.907761]
               });
               marker.setMap(map);
               return marker;
           } else {
               var marker = new AMap.Marker();
               var markerContent = document.createElement('div');
               //自定义点标记内容
               var markerImg = document.createElement('img');
               markerImg.className = "markerIngLat";
               markerImg.src = icon || "https://webapi.amap.com/images/car.png";
               markerContent.appendChild(markerImg);
   
               //点标记的文本
               var markerSpan = document.createElement('span');
               markerSpan.className = "marker";
               markerSpan.innerHTML = text || '';
               markerContent.appendChild(markerSpan);
   
               marker.setContent(markerContent);
               marker.setPosition(posArr);
               marker.setMap(map);
               return marker;
           }
       }
   

4. 高德地图添加覆盖层

   //添加覆盖层	-- 作用：设置高清地图，用于显示超过当前地图支持的缩放级别时使用
       function addPic(image, map) {
           var image = image;
           var imageLayer = new AMap.ImageLayer({
               url: image,
               //地图位置：左上角&右下角
               bounds: new AMap.Bounds(
                   [120.30460, 31.47510],
                   [120.326049, 31.488082]
               ),
               zooms: [0, 20],
               zIndex: 100
           });
           imageLayer.setMap(map);
       }
   

5. 高德地图根据数据添加轨迹移动

   // 绘制轨迹
       var lineArr = [
           [108.836914, 34.208298],
           [108.836946, 34.211652],
           [108.836792, 34.21165],
           [108.83641, 34.211444],
           [108.832435, 34.211569],
           [108.832363, 34.21153],
           [108.832333, 34.207824],
           [108.839178, 34.207806]
       ];
   
       var polyline = new AMap.Polyline({
           map: map,
           path: lineArr,
           showDir: false, // 展示标记
           strokeColor: "#28F", //线颜色
           strokeOpacity: 0.1, //线透明度
           strokeWeight: 3, //线宽
           // strokeStyle: "solid" //线样式
       });
   	
   	marker.on('moving', function (e) {
           // 可以对点标记在移动过程中监听
       });
   
   	setTimeout(function() {
           marker.moveAlong(lineArr, 200);
       },1000);
   

6. 高德地图添加事件监听

   map.on('click',function(e) {
           console.log(e.lnglat.getLng(), e.lnglat.getLat());
       });
   

7. 高德地图总结：
   拥有最友好的API文档，使用最方便，包含常用功能：自定义样式，添加自定义点标记，添加覆盖层，绘制轨迹等功能。
   美中不足： 自定义地图样式之后，无法设置中英文切换，设置后会导致自定义样式不生效。

Google地图 - - 中英文切换地图

1. google API: https://code.google.com/apis/console 有可能被拦截

2. 初始化Google map:

   // 秘钥申请需要绑定信用卡哦 
   <script src="http://ditu.google.com/maps?file=api&hl=zh-CN&v=2&key=申请您的秘钥" type="text/javascript"></script>
   <script>
    var mapOptions = {
    	//初始化地图中心点
        conter: new google.maps.LatLng(lat,lng),
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollWheel: true,
        styles: [
        	// 地图自定义样式
        ]
    };
    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
    </script>
   

   API秘钥申请参考： http://www.360doc.com/content/18/0929/07/3175779_790580333.shtml
   自定义地图样式请参考(Snazzy Maps 是一个提供 Google 地图配色大全的网站)：
   https://snazzymaps.com/

3. Google地图添加点标记

   // 你没看错，又是一个插件 RichMarker，谷歌添加自定义点标记的插件
   var myLatLng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
   var endMarker = new RichMarker({
       position: myLatLng,
       map: map,
       content: '<div class="dot-marker" id="123"> <img src="img/selected03.png" /></div>'
   });
   

4. Google地图添加覆盖层

    var imageBounds = {
           north: 37.568893,
           south: 37.536901,
           east: 15.105006,
           west: 15.044304
       };
       var historicalOverlay = new google.maps.GroundOverlay('img/map_bg.png', imageBounds);
       historicalOverlay.setMap(map);
   

5. Google地图添事件监听

   google.maps.event.addListener(map, 'click', function(event) {
           console.log(event.latLng.lat(), event.latLng.lng());
       });
   

三大地图汇总 - - 淘金

1. 通过三大地图的介绍，我相信大家肯定掌握了一个规律，好像地图的用法基本都一样了，初始化地图、自定义地图样式、添加自定义点标记、添加覆盖层、根据数据画轨迹等…没有错，应该所有的地图API最常用的功能都是如此！
2. 百度地图可以通过结合echarts的多线图、气泡图等实现炫酷的大数据展示；
3. 高德地图的API文档、以及实例demo都是最友好的，最容易上手的地图，值得推荐；
4. Google地图API文档，秘钥注册等方面都不友好，但是人家可以实现中英文切换，满足某些国际项目的需要。