如何使用 SnapToRoad 的响应？

Question

我想知道如何在 javascript 代码中接收谷歌地图的 SnapToRaod 响应，以及如何使用该响应来生成带有 SnapToRoad 响应的地图（在 javascript 中也是如此）。我正在尝试在 html 页面中执行类似的操作。

我已经测试了我的 API 密钥并且它正在运行，我收到了来自 road.googleapis.com 的回复，但我找不到任何可以帮助我解决这些问题的东西。

Answer 1

示例（从 Android 手机上的 GPS 捕获的 37 个数据点，开始是两个数据集，一个有 250 个点，DP 简化后为 17 个点，第二组 503，DP 简化后减少到 37 个点），显示在 Google Maps JavaScript API v3 地图上以折线形式返回的数据。

注意：最高要求为100分。

代码 sn-p：

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>