Javascript 如何在angular中生成自定义指令，以便使用google maps计算距离

我想对使用谷歌地图计算距离的函数做一个指示。我在这个项目中使用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>

我不明白这个错误是什么意思，请任何人帮助我，向我解释代码的错误。谢谢：）

也许这个

travelMode: google.maps.DirectionsTravelMode.DRIVING

应该是这个吗

google.maps.TravelMode.DRIVING

根据这个链接

更新

试试这个

在这个HTML片段中

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

哪个是一个字符串，但是它是一个在开头和结尾都有“and”字符的字符串。我认为您的ori和dest都不应该有双引号，因为它们在到达Google API时仍然是字符串，但在这种情况下，它们到达时使用的字符很可能是Google API不允许的。谷歌地图API很可能会像这样的字符串

"-7.048443, 110.441022"

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

或者如果你在控制台上打印出来，会是这样的

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

如果你这样做的话，情况就糟了

console.log(ori[0])

您将得到（坏）字符串的第一个字符，即“It should be”-

因此，对于origin您会得到一个错误，因为API在第一个代码中失败。我认为如果您将ori改为此

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

如果只有一组引号，那么dest也会因为同样的原因失败

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

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

---

让我们知道这是否有效…

试试

@JqueryKing谢谢你的回答，我已经试过了，但是仍然得到了相同的错误。你试过记录你的来源吗？确保你的calcRoute收到了正确的值（尝试控制台记录或在calcRoute的第一行中提醒ori和dest）。还有您的请求对象。您还应该检查类型。@所以我也试过了，记录ori和dest显示正确的值，并记录

typeof

show'string'。记录请求会显示以下结果，

object{origin:“string”，destination:“string”，travelMode:“DRIVING”}

。但是它仍然不起作用，还有其他解决方案吗？谢谢：Dtry logging request.origin。它是返回lat/long还是空字符串？我想这不是问题，就像我在上面的注释

travelMode

返回正确的值中提到的那样。但是我会尝试一下。谢谢：Dthanks的更新，你的建议几乎是正确的与上面评论中的JqueryKing建议相同，我尝试使用双引号，但仍然不起作用..当我使用单引号时，它起作用..我真的不知道实际发生了什么，但感谢大家帮助我..：）

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