routeParms 未按预期使用 googlemaps 方向 api

Question

我正在尝试使用 $routeParams

将一个位置的纬度和经度从一个 html 文件发送到另一个文件

我在第二页中使用了google地图方向API来显示从源纬度和经度到目标纬度和经度的方向，

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_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();
}]);

卡车 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

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

改变

directionsEndLongitude =  Number($routeParams.srctolat);

到

directionsEndLongitude =  Number($routeParams.srctolag);

routeParms 未按预期使用 googlemaps 方向 api

routeParms is not working as expected with googlemaps directions api

javascript

angularjs

angularjs-routing

google-directions-api