GoogleMap增加标记和路线轨迹的方法

声明：本文基于JavaScript环境编写。

前言

按照目前的项目需求，我们需要在谷歌地图上标记出当前仓库的位置、司机补货的行车路径、司机当前班次需要补货的机器的位置，同时根据补货状态的不同标记成不同状态的图标。

分析完需求，总结一下就是我们需要在谷歌地图上显示众多标记、轨迹画线、不同的标记显示不同的图标，于是前往Google Map查看Api，因为我们的需求重点是在PC浏览器上实现，所以我们只关注了基于JavaScript的API，本文也基于此展开叙述。

目标

从本文中我将大概总结以下几点内容：

• 在web项目中引入Google Map。
• 在地图上增加位置标记。
• 在地图上增加自定义图标标记。
• 在地图上根据众多GPS点绘制路线，并标记不同颜色。
• 在地图上清除已经绘制好的标记。

我截取了一张实际的效果图，其中图标有蓝色的仓库、绿色状态表示已完成的机器，未完成的机器应该是灰色的，但是这张图中没有这种状态的数据。

功能实现

前期准备

1、准备好SDK引入

按照GoogleMap API中的指引，你需要引入以下JS文件：

 <!--
 * Load the API from the specified URL
 * The async attribute allows the browser to render the page while the API loads
 * The key parameter will contain your own API key (which is not needed for this tutorial)
 * The callback parameter executes the initMap() function
 -->
 <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

其中，YOUR_API_KEY是你在Google云平台操作面板为GoogleMap API使用所申请的秘钥，你可以通过以下指南找到答案。

申请GoogleMap API KEY：https://developers.google.com/maps/documentation/javascript/get-api-key

同时，按照上面引用的JS文件中指明的回调方法，你需要写出函数体，并在此中初始化地图和数据：

 <script>
     // Initialize and add the map
     function initMap() {
         ....
     }
 </script>

创建地图

1、创建一个div用来放置地图，可以给地图设置一个id属性，以便生成地图时使用

<div id="map" class="ibox-content" style="padding:15px 0 20px 0"></div>

2、创建Google地图对象，设置中心点和视图层级等信息

 /* 初始化地图对象 */
 function initMap() {
     var center = {lat: 13.751898, lng: 100.500565};
     var map = new google.maps.Map(document.getElementById('map'), {
         center: center, // 地图所展现视图的中心点
         zoom: 10,
         mapTypeId: google.maps.MapTypeId.ROADMAP,
         mapTypeControl: false,
         panControl: false,
         zoomControl: true,
         streetViewControl: false
     });
 }

3、添加仓库位置标记

 /* 获取仓库位置数据，并在地图上显示仓库图标 */
 function showWarehousePosition(map) {
     var warehouseId = $("#warehouse").val();
     $.ajax({
         url: 'getWarehouseGpsData',
         type: 'GET',
         dataType: 'JSON',
         data: {warehouseId: warehouseId},
         success: function (data) {
             if(data.code == 200) {
                 if(data.result != undefined) {
                     // 从后台响应回来的是一个包含lat和lng属性的对象
                     var warehouseGpsPosition = {lat: Number(data.result.lat), lng: Number(data.result.lng)};
                     // 在地图上生成仓库的标记，仓库图标自定义
                     var marker = new google.maps.Marker({
                         position: warehouseGpsPosition,
                         icon: "./googlemap/images/warehouse.png",
                         map: map
                     });
                 }
             }else {
                 alert("Failed.");
             }
         },
         error: function () {
             alert("System error.");
         }
     })
 }

4、添加机器的位置，为不同状态标注不同图标

 // 用于记录机器标注位置，以便于后续清除标记
 var deviceMarkerArray = [];

 /* 查询机器位置数据 */
 function showMachinePosition(map) {
     var buzId = $("#business").val();
     $.ajax({
         url: 'getMachineGpsList',
         type: 'GET',
         dataType: 'JSON',
         data: {buzId: buzId},
         success: function (data) {
             if(data.code == 200 && data.result != undefined) {
                 var finishedMachineGpsList = data.result.finishedMachineGpsList;
                 var unfinishedMachineGpsList = data.result.unfinishedMachineGpsList;
                 drawMachinePosition(map, finishedMachineGpsList, unfinishedMachineGpsList);
             }else {
                 alert("Failed.");
             }
         },
         error: function () {
             alert("System error.");
         }
     })
 }

 /* 绘制机器位置 */
 function drawMachinePosition(map, finishedMachineGpsList, unfinishedMachineGpsList) {

     // 先清除地图上之前标记过的机器图标
     // 可做可不做，业务需要的话可以清除
     clearOverlays();

     // 已完成机器位置
     if(finishedMachineGpsList != null && finishedMachineGpsList != undefined) {
         $.each(finishedMachineGpsList, function (index, item) {
             var marker = new google.maps.Marker({
                 position: item,
                 icon: "./googlemap/images/fulfilled.png",
                 map: map
             });
             deviceMarkerArray.push(marker);
             google.maps.event.addListener(marker,"click",function(){});
         });
     }

     // 未完成机器位置
     if(unfinishedMachineGpsList != null && unfinishedMachineGpsList != undefined) {
         $.each(unfinishedMachineGpsList, function (index, item) {
             var marker = new google.maps.Marker({
                 position: item,
                 icon: "./googlemap/images/unfulfill.png",
                 map: map
             });
             deviceMarkerArray.push(marker);
             google.maps.event.addListener(marker,"click",function(){});
         });
     }

 }

 /* 清除之前的标记 */
 function clearOverlays() {
     if(deviceMarkerArray != undefined && deviceMarkerArray != null && deviceMarkerArray.length > 0) {
         for (var i = 0; i < deviceMarkerArray.length; i++ ) {
             deviceMarkerArray[i].setMap(null);
         }
         deviceMarkerArray.length = 0;
     }
 } 

5、生成司机行车路线

通过司机手机手持app实时上报上来的GPS位置信息，我们将之在地图上逐个标记并串联成线，形成轨迹图效果。

 /* 获取司机行车记录下的GPS数据串，并在地图上连线形成路径 */
 function showDriverRoute(map) {
     var buzId = $("#business").val();
     $.ajax({
         url: 'getDriverGpsList',
         type: 'GET',
         dataType: 'JSON',
         data: {buzId: buzId},
         success: function (data) {
             if(data.code == 200 && data.result != undefined) {
                 drawDriverRoute(map, data.result.driverGpsDataList,
                     data.result.routeColor, data.result.carLocation);
             }else {
                 alert("Failed.");
             }
         },
         error: function () {
             alert("System error.");
         }
     })
 }

 /* 绘制行车路线 */
 function drawDriverRoute(map, driverGpsDataList, routeColor, carLocation) {
     // 绘制行车路线
     // driverGpsDataList是一个后台List对象，数组对象中包含的元素都是包含lat和lng属性的对象
     var driverPath = new google.maps.Polyline({
         path: driverGpsDataList,
         geodesic: true,
         strokeColor: routeColor, // #ff0000
         strokeOpacity: 1.0,
         strokeWeight: 2
     });
     driverPath.setMap(map);

     // 抓取最后的一个点，绘制一个车的图标，表示车在这里
     // carLocation是一个包含lat和lng属性的后台对象
     var latLng = {lat: Number(carLocation.lat), lng: Number(carLocation.lng)};
     var carMarker = new google.maps.Marker({
         position: latLng,
         icon: "./googlemap/images/vehicle.png",
         map: map
     });
 }

参考资料

1、https://developers.google.com/maps/documentation/javascript/tutorial