routeParms 无法按预期使用 googlemaps 方向 api

Question

我正在尝试使用 $routeParams 将位置的纬度和经度从一个 html 文件发送到另一个文件

我在第二页使用谷歌地图方向 API 来显示从 soruce lat and long 到 dest lat and long 的方向，

当我尝试不使用 $routeParams 时，Google 地图 API 工作正常，但当我使用 routeparams 时，它没有按预期工作。

这是我使用 routeparams 时遇到的错误：

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

这是我的代码：

<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

您的代码中有错字。对于您的方向EndLongitude 参数，它应该是 srctolag 而不是 srctolat。

改变

directionsEndLongitude =  Number($routeParams.srctolat);

到

directionsEndLongitude =  Number($routeParams.srctolag);