iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 12
1
Modern Web

我的網站、您的手機、它的Cordova、誰的第三方系列 第 13

{"12":"GEO&GMAP(定點導航)"}

Google MAPs Javascript API 還有一個功能就是「導航」,只是我需要的是,定點導航。因為目前工作上的需要,需要向我們的旅人,介紹在台東的景點或餐廳時,因此如果有個「定點」導航,在跟旅人說明時,就可以更清楚。

如果要做到這樣,就需要使用Google 的 Google Maps Directions Service,在Google MAPs Javascript API中,它被定義為「服務」,就是Google MAPs Javascript中的一個服務,不算是Google MAP中其它的API。

因為要做的是定點,所以出發地和目的地,就是已經知道的了。

        var newJRailway = { lat: 22.7969679, lng: 121.121909 };
        var tree = { lat: 23.0973591, lng: 121.2023173 };

另一個是在基本map中沒有的,則是下列..


   var directionsDisplay = new google.maps.DirectionsRenderer({ 
                map: map
            });
   var directionsService = new google.maps.DirectionsService;
            
            // 設定出發地與目的地的座標和移動方式
            var request = {
                destination: tree,
                origin: newJRailway,
                optimizeWaypoints: true,
                travelMode: 'DRIVING' //此為開車
            };
           
            

完成後的畫面如下:
http://ithelp.ithome.com.tw/upload/images/20161212/20006132Qah8vRnJjZ.png

http://ithelp.ithome.com.tw/upload/images/20161212/20006132YGHxIDotmm.png

完整js碼如下:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
     $("#show_tree").on("click", function initMap() {
               
        var newJRailway = { lat: 22.7969679, lng: 121.121909 };//出發點
        var tree = { lat: 23.0973591, lng: 121.2023173 };//目的地

            var map = new google.maps.Map(document.getElementById('map'), { //宣告Google MAP
                center: newJRailway,
                scrollwheel: false,
                zoom: 14
            });

            var directionsDisplay = new google.maps.DirectionsRenderer({ //載入服務
                map: map
            });
            var directionsService = new google.maps.DirectionsService; //載入服務
            directionsDisplay.setPanel(document.getElementById('output'));

            // 設定出發地與目的地的座標和移動方式
            var request = {
                destination: tree,
                origin: newJRailway,
                optimizeWaypoints: true,
                travelMode: 'DRIVING' //此為開車
            };
            var directionsService = new google.maps.DirectionsService();
            directionsService.route(request, function (response, status) {
                if (status == 'OK') {
                    // 回傳相關資訊
                    directionsDisplay.setDirections(response);
                }
            });
        }
        
        //
)};
        function locError(error) {
            // the current position could not be located
        }

        function locSuccess(position) {
            // initialize map with current position and calculate the route
            initRoute(position.coords.latitude, position.coords.longitude);
        }

最後,只有單點的路線介紹,是不夠的...沿途可能還會想要去其它地方,能透過Google MAP Javascript API做呈現嗎? 可以的,只要加入 waypoint ,就可以做到。

(待)

2016/12/12 Sunallen


上一篇
{"11":"GEO&GMAP(dyanmic)"}
下一篇
{"13":"Find my BUG"}
系列文
我的網站、您的手機、它的Cordova、誰的第三方32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言