Question

我如何从当前位置路由到目的地？错误说“map.js：97 Uncaught TypeError：无法读取未定义的属性'地理位置'”。这是我的代码：

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>

请帮助:(我不知道如何调试这个。

Answer 1

您的错误表明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
        }
    });
});

如何使用ionic cordova从我当前的位置路线到目的地？

1 个答案: