Question

我正在尝试使用$routeParams

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

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

当我在不使用$routeParams的情况下尝试使用谷歌地图API时工作正常，但是当我使用routeparams时，它没有按预期工作。

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

jquery.min.js：5获取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 COde：

.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

您的代码中存在拼写错误。你的directionsEndLongitude参数应该是srctolag而不是srctolat。

更改

directionsEndLongitude =  Number($routeParams.srctolat);

到

directionsEndLongitude =  Number($routeParams.srctolag);

routeParms与googlemaps指令api无法正常工作

1 个答案: