建立路徑規劃

<div id="map-direction-01"></div>
<div id="alert"></div>

$('#map-direction-01').tinyMap({
    'center': '臺北市大安區羅斯福路四段一號',
    'zoom': 13,
    'direction': [
        {
            'from': '臺北市大安區羅斯福路四段一號',
            'to': '臺北市北平西路三號',
            'waypoint': [
                '台北市信義區仁愛路4段505號',
                '臺北市松山區南京東路4段2號'
            ],
            'travel': 'driving',
            // 自訂路徑顏色
            'polylineOptions': {
                'strokeColor': '#CCCC00',
                'strokeOpacity': 0.5
            },
            'event': {
                'directions_changed': {
                    'func': function () {
                        $('#alert').addClass('alert-success').text('路徑規劃已完成。');
                    }
                }
            }
        }
    ]
});

$('#map-direction-02').tinyMap({
    'center': [
        '25.039065815333753',
        '121.56097412109375'
    ],
    'zoom': 14,
    'direction': [
        {
            'from': '臺北市大安區羅斯福路四段一號',
            'fromText': '起點: 羅斯福路四段',
            'waypoint': [
                {
                    'location': '台北市信義區仁愛路4段505號',
                    'text': '仁愛路中繼點',
                    'icon': 'https://code.essoduke.org/images/2.png'
                },
                {
                    'location': '臺北市松山區南京東路4段2號',
                    'text': '南京東路中繼點',
                    'icon': 'https://code.essoduke.org/images/3.png'
                }
            ],
            'to': '臺北市北平西路三號',
            'toText': '終點: 北平西路',
            'travel': 'driving',
            'icon': {
                'from': '//maps.google.com/mapfiles/ms/icons/blue-dot.png',
                'to': '//maps.google.com/mapfiles/ms/icons/purple-dot.png',
                //'waypoint': '由這邊設置的話會取代各 waypoint.icon 的值'
            }
        }
    ]
});

var map = $('#map-direction-renderall');

map.tinyMap({
    'center': ['25.04380934412532', '121.55998706817627'],
    'zoom': 14,
    'direction': [
        {
            'from': '臺北市信義區臺北市政府',
            'to': '台灣桃園國際機場',
            'renderAll': true,
            'requestExtra': {
                'provideRouteAlternatives': true,
            }
        }
    ]
});

.from {
    color: #00D;
}
.to {
    color: #090;
}

var map = $('#map-direction-03');

map.tinyMap({
    'center': ['25.04380934412532', '121.55998706817627'],
    'zoom': 14,
    'direction': [
        {
            'from': '台北車站',
            'to': '台北101',
            'waypoint': ['台北小巨蛋', '國父紀念館']
        },
        {
            'from': '國立故宮博物院',
            'to': '捷運劍潭站'
        }
    ]
});

$('#direction-btn').on('click', function () {
    // 取得 tinyMap 實例
    var m = map.data('tinyMap'),
        d = m.getDirectionsInfo(),
        i = 0,
        j = 0,
        distance = 0,
        duration = 0,
        html = [],
        info = $('#direction-info');

    for (i = 0; i < d.length; i += 1) {
        if (d[i]) {
            html.push('<li>');
            html.push('<div><strong>路徑 ' + (i + 1) + '</strong></div>');
            html.push('<ol>');
            distance = 0;
            duration = 0;
            for (j = 0; j < d[i].length; j += 1) {
                if (d[i][j].hasOwnProperty('distance')) {
                    html.push('<li><span class="from">' + d[i][j].from + '</span> - <span class="to">' + d[i][j].to + '</span> (' + d[i][j].distance.text + ' / ' + d[i][j].duration.text + ')</li>');
                    distance += d[i][j].distance.value;
                    duration += d[i][j].duration.value;
                }
            }
            html.push('</ol>');
            html.push('<p>距離: ' + Math.ceil(distance / 1000, 10) + ' 公里，');
            html.push('約需: ' + Math.ceil(duration / 60, 10) + ' 分鐘</p>');
            html.push('</li>');
        }
    }
    info.empty().html(html.join(''));
});