Как использовать ответ SnapToRoad?

Я хотел бы знать, как получить ответ Google Maps SnapToRaod в коде javascript и как я могу использовать ответ для создания карты с ответом SnapToRoad (также и в javascript). Я пытаюсь сделать что-то подобное на странице html.

Я уже протестировал свой API-ключ, и он работает. Я получил ответ от road.googleapis.com, но не смог найти ничего, что могло бы помочь мне с этими вопросами.


person João Oliveira    schedule 15.10.2016    source источник
comment
связанный вопрос: Ограничения привязки к дороге Google API v3   -  person geocodezip    schedule 16.10.2016
comment
возможная полезная информация в этой проблеме: Issue 9078: Road snapping работает некорректно, несмотря на то, что Directions API показывает наличие данных в системе отслеживания проблем   -  person geocodezip    schedule 16.10.2016
comment
возможная полезная информация в этом выпуске: Issue 9436: Roads- API — дефекты точек привязки в системе отслеживания проблем.   -  person geocodezip    schedule 16.10.2016


Ответы (1)


Пример (37 точек данных, полученных с помощью GPS на телефоне Android, начатых как два набора данных: один с 250 точками, 17 точек после упрощения DP, второй набор из 503, уменьшенный до 37 точек с упрощением DP), отображение возвращенных данных в виде полилинии на карте Google Maps JavaScript API v3.

Примечание. максимальный запрос – 100 баллов.

фрагмент кода:

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: {
      lat: 0,
      lng: 0
    }
  });
  var bounds = new google.maps.LatLngBounds();
  //add each waypoint to an array of lat/lngs
  $.each(trip, function(key, waypoint) {
    unsnappedWaypoints.push(waypoint.lat + ',' + waypoint.lng);
    // raw data from the GPS is the little red dots
    var marker = new google.maps.Marker({
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(1.5, 1.5),
        scaledSize: new google.maps.Size(3,3)
      },
      position: {
        lat: waypoint.lat,
        lng: waypoint.lng
      },
      title: "" + waypoint.lat + "," + waypoint.lng
    });
    bounds.extend(marker.getPosition());
    map.fitBounds(bounds);
  });
  //perform Google Maps API call with joined array for snapped results
  $.ajax({
    url: 'https://roads.googleapis.com/v1/snapToRoads?path=' + unsnappedWaypoints.join('|') + '&key=AIzaSyA1JWR3ohBFQ_P7F5eSMSJb0dwV9PbB3pA&interpolate=true', //true', 
    crossDomain: true,
    dataType: 'jsonp'
  }).done(function(response) {
    if (response.error) {
      alert("error" + response.error.message);
      return;
    }
    //create polyline from snapped waypoints
    var tripRoute = new google.maps.Polyline({
      path: [],
      gseodesic: true,
      strokeColor: '#663496',
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

    tripRoute.setMap(map);
    //iterate through returned waypoints to create array of lat/lngs for polyline
    $.each(response, function(key, snappedPoints) {
      $.each(snappedPoints, function(key, snappedPoint) {

        snappedWaypoints.push({
          lat: snappedPoint.location.latitude,
          lng: snappedPoint.location.longitude
        });
        tripRoute.setPath(snappedWaypoints);
        //add snapped waypoints to map to show difference between originals and returned
        // snapped points are the slightly bigger blue dots
        var marker = new google.maps.Marker({
          map: map,
          icon: {
            url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle_blue.png",
            size: new google.maps.Size(7, 7),
            anchor: new google.maps.Point(2.5, 2.5),
            scaledSize: new google.maps.Size(5,5)
          },
          position: {
            lat: snappedPoint.location.latitude,
            lng: snappedPoint.location.longitude
          },
          title: "" + snappedPoint.location.latitude + "," + snappedPoint.location.longitude
        });

        //increase the bounds to take into account waypoints
        bounds.extend(new google.maps.LatLng(snappedPoint.location.latitude, snappedPoint.location.longitude));
      });
    });
  }).fail(function(jqXHR, textStatus, errorThrown) {
    alert(textStatus + ":" + errorThrown);
  });;

}
google.maps.event.addDomListener(window, 'load', initialize);

//setup vars
 var trip = [{lat:32.85420, lng:-117.20454},
{lat:32.85206, lng:-117.20391},
{lat:32.84934, lng:-117.20415},
{lat:32.84851, lng:-117.20391},
{lat:32.84749, lng:-117.20318},
{lat:32.84377, lng:-117.19893},
{lat:32.84269, lng:-117.19798},
{lat:32.84095, lng:-117.19719},
{lat:32.83776, lng:-117.19611},
{lat:32.83749, lng:-117.19637},
{lat:32.83614, lng:-117.19876},
{lat:32.83609, lng:-117.20142},
{lat:32.83357, lng:-117.20144},
{lat:32.83339, lng:-117.20261},
{lat:32.83234, lng:-117.20445},
{lat:32.83089, lng:-117.20434},
{lat:32.83084, lng:-117.20419},
{lat:32.83102, lng:-117.20390},
{lat:32.83092, lng:-117.20352},
{lat:32.83190, lng:-117.20346},
{lat:32.83172, lng:-117.20170},
{lat:32.83258, lng:-117.20114},
{lat:32.83321, lng:-117.20048},
{lat:32.83404, lng:-117.19914},
{lat:32.83442, lng:-117.19745},
{lat:32.83447, lng:-117.19506},
{lat:32.83468, lng:-117.19480},
{lat:32.83547, lng:-117.19493},
{lat:32.83716, lng:-117.19570},
{lat:32.84101, lng:-117.19702},
{lat:32.84288, lng:-117.19790},
{lat:32.84383, lng:-117.19874},
{lat:32.84763, lng:-117.20308},
{lat:32.84844, lng:-117.20372},
{lat:32.84951, lng:-117.20400},
{lat:32.85235, lng:-117.20377},
{lat:32.85437, lng:-117.20438}];

 var unsnappedWaypoints = [];
 var snappedWaypoints = [];
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map" style="height: 400px; width: 500px"></div>

person geocodezip    schedule 16.10.2016