Question

我的代码如下：

var initialize = function (data) {
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    directionsDisplay = new google.maps.DirectionsRenderer();

    google.maps.visualRefresh = true;
    var centerLocation = new google.maps.LatLng(33.766948, 72.823462);
    var mapOptions = {
        zoom: 5,
        center: centerLocation,
        mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    directionsDisplay.setMap(map);
    directionsDisplay.setOptions({ suppressMarkers: true });
    var request = {
        travelMode: google.maps.TravelMode.DRIVING
    };

    // mark source and destinations
    $.each(data, function (i, item) {
        var marker = new google.maps.Marker({
            'position': new 
              google.maps.LatLng(item.Latitude,item.Longitude),
            'map': map,
            'title': item.Name
        });

        // 1 means source, 2 means destination, 3 means it is a stop
        if (item.Color == 1) {
            request.origin = marker.getPosition();                
        }
        else if (item.Color == 2) {
            **request.destination = marker.getPosition();**
        }

        directionsService.route(request, function (result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(result);
            }
        });
    })
}

我得到的错误如下：

InvalidValueError：在属性目标中：不是字符串;而不是一个 LatLng或LatLngLiteral：不是对象;而不是对象

Answer 1

只需将directionsService.route(request, function (result, status) {...放在$.each循环之外，这应该可行。根据您发送的代码，我假设您在data中使用的$.each对象如下所示：

var data = [
  {Latitude: 39.627012, Longitude: 66.974973, Name: 'Afghanistan', Color: 1},
  {Latitude: 41.444172, Longitude: 74.741835, Name: 'Kyrgyzstan', Color: 2}
];

让我向您解释$.each循环中的代码如何工作。它首先要做的是设置一个标记：

var marker = new google.maps.Marker({
  'position': new google.maps.LatLng(item.Latitude,item.Longitude),
  'map': map,
  'title': item.Name
});

接下来是通过获取color

的值来确定标记是原点还是目标的情况

if (item.Color == 1) {
  request.origin = marker.getPosition();
}
else if (item.Color == 2) {
  request.destination = marker.getPosition();
}

如果您想到这一点，您将在1循环后获得原点或目的地。然后，您将调用此代码来获取方向：

directionsService.route(request, function (result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(result);
    }
});

然后该部分将触发错误：

InvalidValueError：在属性目标中：不是字符串;而不是LatLng或LatLngLiteral：不是对象;而不是对象

这意味着您没有提供有效的目的地。如果我们要使用上面提供的示例data对象，您可以看到第一个对象是origin以来的color: 1。但目的地尚未设定，只能在第二次循环后设定。

如果将directionsService.route(request, function (result, status) {...移到循环外部，则在使用此函数中的request变量之前，将首先设置原点和目标。

您的代码$.each循环应如下所示：

$.each(data, function (i, item) {
    var marker = new google.maps.Marker({
      'position': new google.maps.LatLng(item.Latitude,item.Longitude),
      'map': map,
      'title': item.Name
    });
    if (item.Color == 1) {
      request.origin = marker.getPosition();
    }
    else if (item.Color == 2) {
      request.destination = marker.getPosition();
    }
  });
  directionsService.route(request, function (result, status) {
    console.log(status)
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });

如果您想查看此代码的实际操作，可以查看以下链接： http://jsbin.com/lomekek/edit?html,js,output

我在属性＆＃39; destination＆＃39;中收到了InvalidValueError。使用路线服务时

1 个答案: