如何使用離子科爾多瓦從我的當前位置路由到我的目的地？

我如何從當前位置路由到目的地？錯誤顯示爲「map.js：97 Uncaught TypeError：無法讀取未定義屬性的'geolocation'」。這裏是我的代碼：如何使用離子科爾多瓦從我的當前位置路由到我的目的地？

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 

var Latitude = undefined; 
var Longitude = undefined; 

// Get geo coordinates 

function getMapLocation() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    navigator.geolocation.getCurrentPosition 
    (onMapSuccess, onMapError, { enableHighAccuracy: true }); 

} 

// Success callback for get geo coordinates 

var onMapSuccess = function (position) { 

    Latitude = position.coords.latitude; 
    Longitude = position.coords.longitude; 

    getMap(Latitude, Longitude); 

} 

// Get map by using coordinates 


function getMap(latitude, longitude) { 

    var mapOptions = { 
     center: new google.maps.LatLng(0, 0), 
     zoom: 1, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map 
    (document.getElementById("map"), mapOptions); 


    var latLong = new google.maps.LatLng(latitude, longitude); 

    var marker = new google.maps.Marker({ 
     position: latLong 
    }); 

    marker.setMap(map); 
    map.setZoom(16); 
    map.setCenter(marker.getPosition()); 
} 

// Success callback for watching your changing position 

var onMapWatchSuccess = function (position) { 

    var updatedLatitude = position.coords.latitude; 
    var updatedLongitude = position.coords.longitude; 

    if (updatedLatitude != Latitude && updatedLongitude != Longitude) { 

     Latitude = updatedLatitude; 
     Longitude = updatedLongitude; 

     getMap(updatedLatitude, updatedLongitude); 
    } 
} 

// Error callback 

function onMapError(error) { 
    console.log('code: ' + error.code + '\n' + 
     'message: ' + error.message + '\n'); 
} 

// Watch your changing position 

function watchMapPosition() { 

    return navigator.geolocation.watchPosition 
    (onMapWatchSuccess, onMapError, { enableHighAccuracy: true }); 
} 

function calcRoute() { 
    var start = document.navigator.geolocation.getCurrentPosition; 
    var end = document.getElementById('end').value; 
    var request = { 
    origin: start, 
    destination: end, 
    travelMode: 'DRIVING' 
    }; 
    directionsService.route(request, function(result, status) { 
    if (status == 'OK') { 
     marker.setDirections(result); 
    } 
    }); 
} 

google.maps.event.addDomListener(window, 'load', getMapLocation);

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title></title> 
 

 
    <link rel="manifest" href="manifest.json"> 
 

 

 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 

 
    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
 
    <link href="css/ionic.app.css" rel="stylesheet"> 
 
    --> 
 

 
    <!-- ionic/angularjs js --> 
 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
 

 
    <!-- cordova script (this will be a 404 during development) --> 
 
    <script src="cordova.js"></script> 
 

 
    <!-- your app's js --> 
 
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBMuP26Vlechg6tTrXDNhbZAm7PY7bu814"></script> 
 
    <script src="js/app.js"></script> 
 
    <script src="js/map.js"></script> 
 

 

 

 
    </head> 
 
    <body ng-app="starter"> 
 

 
    <ion-pane> 
 
     <ion-header-bar class="bar-energized"> 
 
     <h1 class="title">Find Me: Tracker</h1> 
 
     </ion-header-bar> 
 
     <ion-content> 
 
     <div class="list"> 
 
      
 
      <label class="item item-input"> 
 
      <span class="input-label">Destination</span> 
 
      <input id="end" type="text" placeholder="Destination"> 
 
      </label> 
 
      <button class="button button-block button-balanced" onclick="calcRoute();">Get Direction</button> 
 
      <div id="map" data-tap-disabled="true"> </div> 
 
     </div> 
 
     
 
     </ion-content> 
 

 

 
    </ion-pane> 
 
    </body> 
 
</html>

請幫助:(我不知道如何調試這

來源

2016-12-09 Tanex Junior

你的錯誤表示navigator.geolocation尚不存在

。

在嘗試使用Cordova的地理位置插件之前，您需要等到設備準備就緒後，才能通過包裝呼叫與ionic.Platform.ready或$ionicPlatform.ready。請參閱http://ionicframework.com/docs/api/service/$ionicPlatform/。您還可以在插件文檔頂部看到純JavaScript示例：https://github.com/apache/cordova-plugin-geolocation。

下面是一個使用ngCordova的例子。（更多詳細信息在http://ngcordova.com/docs/plugins/geolocation/。）

$ionicPlatform.ready(function() 
{ 
    $cordovaGeolocation.getCurrentPosition 
    ({ 
     timeout:   10000, // allow 10 seconds for GPS 
     maximumAge:  300000, // OK if position is from 5 mins ago 
     enableHighAccuracy: false // don't prompt user for GPS if on wifi 
    }) 
    .then(function (response, err) 
    { 
     if (response.coords) 
     { 
      // do stuff with response.coords.latitude 
      // do stuff with response.coords.longitude 
     } 
    }); 
});

來源

2016-12-09 03:28:16

如何使用離子科爾多瓦從我的當前位置路由到我的目的地？

回答

相關問題