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