Я получаю InvalidValueError в свойстве 'destination' при использовании сервиса маршрутов

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 в этомfunction.

Ваш код $.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