路徑規劃 API

使用 Map8Route 控制元件 直接傳入 origin, destination, 與 waypoints 等參數，就能直接為您在地圖上把所規劃的路徑畫出來，很方便。

本範例即為使用 Map8 Routes / Directions API 所得到的路徑規劃結果。

您亦可傳入自訂的樣式定義，讓 Map8Route 控制元件 直接為您在地圖上繪製出您所希望的樣式。請參考 Map8Route 說明文件。

請按 [起終點切換] 按鈕，即可透過 Map8Route 控制元件將起訖點對調。
[列出所有停留點] 按鈕則將控制元件內的起訖點與中途點資料讀出，請打開您的瀏覽器 console 檢查。
而 [移除所有停留點] 則將起訖點、中途點，與所規劃的路徑全部清除。

範例展示

原始碼

程式的主體結構其實真的很簡單，即：

建構 gomp.Map 物件、GompWebServiceJsClient 物件、與 Map8Route 物件。
然後將 Map8Route 透過 gomp.Map.addControl() 與地圖連結。
最後再呼叫 Map8Route.route()：讓 Map8Route 為您呼叫 Map8 Routes / Directions API 以進行路徑規劃，並直接將結果繪製到地圖上，這樣就完成了。

<script type="text/javascript">
    var map = new gomp.Map(...);

    var gompWebServiceJsClient = new GompWebServiceJsClient(...);

    var map8Route = new Map8Route(gompWebServiceJsClient);

    map.addControl(map8Route, ...);

    // 在地圖物件載入完成後 (i.e., `map` 的 `load` 事件觸發過後)，
    // 即可執行 `Map8Route.route()`
    map8Route.route({
        origin: [121.579839,25.065064], 
        destination: [120.67955,24.1418], 
        waypoints: [
            [121.132961,24.724502],
            [120.694698,24.49845]
        ],
        profile: "car",
        fitBoundsOptions: {padding: 30}
    });
</script>

So, 本範例完整原始碼如下：

copy

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>路徑規劃 API - Map8 Platform Documentation</title>
    <link rel="stylesheet" href="https://api.map8.zone/css/gomp.css?key=[YOUR_KEY_HERE]" />
    <style>
        #map{
            height: 400px;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <p>
        <button id="reverse">起終點切換</button>
        <button id="readWaypoints">列出所有 Waypoint (列於 Console)</button>
        <button id="removeWaypoints">移除所有 Waypoint</button>
    </p>

    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript" src="https://api.map8.zone/maps/js/gomp-web-service-js-client.min.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript" src="https://api.map8.zone/maps/js/map8-js-route.js?key=[YOUR_KEY_HERE]"></script>
    <script type="text/javascript">
        gomp.accessToken = '[YOUR_KEY_HERE]';
        var map = new gomp.Map({
            container: 'map', // 地圖容器 ID
            style: 'https://api.map8.zone/styles/go-life-maps-tw-style-std/style.json', // 地圖樣式檔案位置
            maxBounds: [[105, 15], [138.45858, 33.4]], // 台灣地圖區域
            center: [121.54885, 25.03625], // 初始中心座標，格式為 [lng, lat]
            zoom: 16, // 初始 ZOOM LEVEL; [0-20, 0 為最小 (遠), 20 ;最大 (近)]
            minZoom: 6, // 限制地圖可縮放之最小等級, 可省略, [0-19.99]
            maxZoom: 19.99, // 限制地圖可縮放之最大等級, 可省略 [0-19.99]
            pitch: 50, // 攝影機仰角, 可省略, [0-60]
            bearing: 0, // 地圖角度, 可省略, [-180 ~ 180; 0 為正北朝上, 180 為正南朝上]
            speedLoad: false,
            attributionControl: false
        }).addControl(new gomp.AttributionControl({
            compact: false
        }));
        map.addControl(new gomp.NavigationControl());

        var gompWebServiceJsClient = new GompWebServiceJsClient({
            key: gomp.accessToken
        });

        var map8Route = new Map8Route({
            gompWebServiceJsClient: gompWebServiceJsClient,
        });

        map.addControl(map8Route);

        map.on('load', function() {    // 在地圖物件載入完成後
            map8Route.route({
                origin: [121.579839,25.065064],
                destination: [120.67955,24.1418],
                waypoints: [
                    [121.132961,24.724502],
                    [120.694698,24.49845]
                ],
                profile: "car",
                fitBoundsOptions: {padding: 30}    // 設定 `Map8Route.route()` 完成繪製時的過場動畫效果為顯示範圍周遭留白 30px
            });

            document.getElementById('reverse').addEventListener('click', function() {
                map8Route.reverse();
            });

            document.getElementById('readWaypoints').addEventListener('click', function() {
                console.log(map8Route.getOrigin());
                console.log(map8Route.getDestination());
                console.log(map8Route.getWaypoints());
            });

            document.getElementById('removeWaypoints').addEventListener('click', function() {
                map8Route.removeRoutes();
            });
        });

        // 攔截 `Map8Route` 於 `route()` 完成時所觸發的事件，並將所傳入的路徑規劃結果傾印出來
        // 資料結構請參考 [Map8 API 文件](https://www.map8.zone/map8-api-docs/#directions-api 之說明)
        map8Route.on('route', function(route) { console.log(route) });
    </script>
</body>
</html>