如何使用SnapToRoad的响应？

Question

我想知道如何在javascript代码中收到谷歌地图SnapToRaod响应以及如何使用响应来生成带有SnapToRoad响应的地图（在javascript中也是如此）。我试图在html页面中做这样的事情。

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

Answer 1

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

注意：最高要求为100分。

代码段

＆＃13;

＆＃13;

/**
 * Show all of the projects for the current user.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return Response
 */
public function index(Request $request)
{
    $projects = $request->user()->projects;

    $value = $request->session()->get('key');

    //
}

＆＃13;

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 = [];

＆＃13;

＆＃13;

＆＃13;