routeParms не работает должным образом с API-интерфейсами googlemaps

Question

Я пытаюсь отправить широту и долготу местоположения из одного файла HTML в другой файл с помощью $routeParams

Я использовал API направлений Google Maps на второй странице, чтобы показать направление от широты и долготы до широты и долготы,

Google Maps API работает нормально, когда я пытался без использования $routeParams, но когда я использовал routeparams, он не работает, как ожидалось.

Это то, что ошибка, которую я получил, когда я использовал routeparams:

jquery.min.js: 5 GET https://maps.googleapis.com/maps/api/js?key=AIzaSyAandyF_iZi1pAlTiiFKlLb4CKxjmSLDJA&callback=%20initMap&_=1508839370960 net:: ERR_AB

Вот мой код:

<a href="#/tracktruck/17.418611/78.519708/17.424653/78.64478"><button class="btn col-xs-6 btn btn-primary" style="color:white;width:48%;margin-top: 20px">track truck</button></a>

Код JS:

.when('/tracktruck/:srcfrmlat/:srcfrmlag/:srctolat/:srctolag', {
    templateUrl: 'tracktruck.html',
    controller: 'tracktruckController'
})

Контроллер:

app.controller('tracktruckController', ['$scope', '$http','$routeParams',function ($scope, $http,$routeParams) {

var initMap = function() {
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var directionsMap;
    var z = document.getElementById("map");
    var start;
    var end;
    getDirectionsLocation();
    function getDirectionsLocation() {
        console.log("getDirectionsLocation");
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showDirectionsPosition);
        } else {
            z.innerHTML = "Geolocation is not supported by this browser.";
        }
    }
    function showDirectionsPosition(position) {
        console.log("showDirectionsPosition");
        directionsLatitude = Number($routeParams.srcfrmlat);
        directionsLongitude =  Number($routeParams.srcfrmlag);
        directionsEndLatitude = Number($routeParams.srctolat);
        directionsEndLongitude =  Number($routeParams.srctolat);
        start = new google.maps.LatLng(directionsLatitude,directionsLongitude);
        end = new google.maps.LatLng(directionsEndLatitude,directionsEndLongitude);
        getDirections();
        //console.log(directionsLatLng);
    }

    function getDirections() {
        console.log('getDirections');
        directionsDisplay = new google.maps.DirectionsRenderer();
        //start = new google.maps.LatLng(directionsLatLng);
        var directionsOptions = {
            zoom:9,
            center: start
        }
        directionsMap = new google.maps.Map(document.getElementById("map"), directionsOptions);
        directionsDisplay.setMap(directionsMap);
        calcRoute();
    }

    function calcRoute() {
        console.log("calcRoute");
 var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.TravelMode.TRANSIT
        };
        directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    }

        getDirectionsLocation();


}

initMap();
}]);

Tracktruck HTML-файл:

<div id="map" style=" height: 400px;width: 100%;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAandyF_iZi1pAlTiiFKlLb4CKxjmSLDJA&callback= initMap"></script>

Заранее спасибо:)

Answer 1

В вашем коде есть опечатка. Это должен быть srctolag вместо srctolat для вашего параметра directionsEndLongitude.

+ Изменить

directionsEndLongitude =  Number($routeParams.srctolat);

в

directionsEndLongitude =  Number($routeParams.srctolag);