javascript - 如何在 Angular 中制作自定义指令以使用谷歌地图计算距离

Question

我想制定一个函数指令来使用谷歌地图计算距离。我在这个项目中使用 angularjs 和 ionic，但是当我编写这段代码时，我收到错误。这是代码。

var control = angular.module('starter.controllers', []);

control.controller('MainCtrl', function($scope,$http, $ionicPopup, $timeout,$ionicModal) {
    $scope.ori = "-7.048443, 110.441022";
    $scope.dest = "-7.048264, 110.440388";
});

control.directive('distance', function () {
    var calcRoute = function(ori,dest,cb) {
        var dist;
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        directionsDisplay = new google.maps.DirectionsRenderer();
    var request = {
        origin:ori,
        destination:dest,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            cb(null, response.routes[0].legs[0].distance.value / 1000);
        }
        else {
            cb("error");
        }
     });
    };
    return{
        restrict:"E",
        scope: {
            ori: "@",
            dest:"@"
        },
        link: function(scope, elm, attrs) {
        var ori = attrs.ori;
        var dest = attrs.dest;
        calcRoute(ori,dest, function (err, dist) {
            if (!err) {
              console.log(dist);
            }else{
                console.log(err);
            }
        });
      }
    };
});

在我的查看文件中:

<distance ori='"{{ori}}"' dest='"{{dest}}"'></distance>

控制台上的错误是:

Uncaught InvalidValueError: in property origin: not a string; and not a LatLng or LatLngLiteral: not an Object

我不明白该错误的含义是什么，请任何人帮助我，向我解释一下代码有什么问题。谢谢你:)

Answer 1

也许是这个

travelMode: google.maps.DirectionsTravelMode.DRIVING

应该是这个吗？

google.maps.TravelMode.DRIVING

按照此链接？

Google Maps API

更新

试试这个

在此 HTML 片段中

<distance ori='"{{ori}}"' dest='"{{dest}}"'></distance>

您有 ori='"{{ori}}"' (以及 dest )都包含双引号。这会导致指令内出现一个如下所示的字符串...

"-7.048443, 110.441022"

它是一个字符串，但是它是一个在开头和结尾带有字符“和”的字符串。我认为您的 ori 和 dest 都不应该有双引号，因为它们到达 Google API 时仍然是字符串，但在这种情况下，它们到达时带有 Google API 很可能不允许。 Google Map API 很可能会喜欢这样的字符串...

-7.048443, 110.441022 NOT THIS "-7.048443, 110.441022"

或者如果你在控制台中打印出来它们会看起来像这样

"-7.048443, 110.441022" (good) ""-7.048443, 110.441022"" (bad)

在(坏的)情况下，如果你这样做了

console.log(ori[0])

你会得到(坏)字符串的第一个字符，它是“它应该是 -

因此，您会收到 origin 错误，因为 API 在第一个代码上失败。我认为如果你将 ori 改正为这个......

<distance ori="{{ori}}" dest='"{{dest}}"'></distance>

仅使用一组引号，则 dest 会因同样的原因而失败。

最终，我认为将您的 HTML 代码段更改为此将导致正确执行...

<distance ori="{{ori}}" dest="{{dest}}"></distance>

请告诉我们这是否有效...