Roads API an der Straße mit GeoJSON

Question

Ich habe 3 LineString-Funktionen. Ich versuche, Koordinaten von diesen 3 LineString-Funktionen an die Roads-API zu senden, damit ich saubere, gefangene Linien auf der Karte erhalten kann. Ich habe versucht, die example outlined by Google, aber für GeoJSON Funktionen anzupassen. Beim Laden der Karte sollten alle drei Funktionen im Google-Straßennetzwerk aktiviert sein.

Das Problem ist, dass ich einen Fehler bekomme, obwohl ich dachte, dass ich die Koordinaten korrekt als "Pfad" übergeben würde. Der Fehlercode, den ich bekomme, ist 400, mit Nachricht "\"path\" contains an invalid value und status: "INVALID_ARGUMENT.

Code Snippet:

var data = { "type": "FeatureCollection", "features": [{ "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-73.97056102752686, 40.74811853855757], [-73.96944522857666, 40.74953279908402], [-73.96798610687256, 40.75135341202851], [-73.97109746932983, 40.75314146550602], [-73.97472381591797, 40.75346656097219], [-73.97573232650755, 40.75182481261268], [-73.97721290588379, 40.750768220446936], [-73.97757768630981, 40.74940275339479] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-73.96279335021973, 40.75512452312348], [-73.96549701690674, 40.75109332751696], [-73.96974563598633, 40.74719193776603], [-73.9726209640503, 40.74481848035928], [-73.97279262542723, 40.74137193935539] ] } }, { "type": "Feature", "properties": {}, "geometry": { "type": "LineString", "coordinates": [ [-74.00107383728026, 40.75931800754126], [-73.99519443511963, 40.757270059827206], [-73.99536609649658, 40.75453936473234], [-73.99888515472412, 40.75304393655622] ] } }] }; 
 

 
var apiKey = 'AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM'; 
 

 
var map; 
 
var snappedCoordinates = []; 
 
var coords; 
 
var subArray; 
 
var placeIdArray = []; 
 
var finalArray = []; 
 

 
function initMap() { 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: { 
 
     lat: 40.749481, 
 
     lng: -73.974290 
 
    } 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    map.data.addGeoJson(data); 
 

 
    // Snap-to-road when the polyline is completed. 
 
    /*drawingManager.addListener('polylinecomplete', function(poly) { 
 
    var path = poly.getPath(); 
 
    polylines.push(poly); 
 
    placeIdArray = []; 
 
    runSnapToRoad(path); 
 
    });*/ 
 

 
    var lines = data.features; 
 
    for (var i = 0; i < lines.length; i++) { 
 
    coords = lines[i].geometry.coordinates; 
 
    // console.log("initial array: ", coords.toString()); 
 
    subArray = [coords.toString()]; 
 
    // console.log('sub array: ', subArray); 
 

 
    runSnapToRoad(subArray); 
 
    } 
 
    
 
} 
 

 
// Snap a user-created polyline to roads and draw the snapped path 
 
function runSnapToRoad(path) { 
 
    // var pathValues = []; 
 
    // console.log(path); 
 
    // for (var i = 0; i < finalArray.length; i++) { 
 
    // pathValues.push(finalArray.getAt(i).toUrlValue()); 
 
    //} 
 

 
    $.get('https://roads.googleapis.com/v1/snapToRoads', { 
 
    interpolate: true, 
 
    key: apiKey, 
 
    path: path.join('|') 
 
    }, function(data) { 
 
    processSnapToRoadResponse(data); 
 
    drawSnappedPolyline(); 
 
    }); 
 
} 
 

 
// Store snapped polyline returned by the snap-to-road service. 
 
function processSnapToRoadResponse(data) { 
 
    snappedCoordinates = []; 
 
    placeIdArray = []; 
 
    for (var i = 0; i < data.snappedPoints.length; i++) { 
 
    var latlng = new google.maps.LatLng(
 
     data.snappedPoints[i].location.latitude, 
 
     data.snappedPoints[i].location.longitude); 
 
    snappedCoordinates.push(latlng); 
 
    placeIdArray.push(data.snappedPoints[i].placeId); 
 
    } 
 
} 
 

 
// Draws the snapped polyline (after processing snap-to-road response). 
 
function drawSnappedPolyline() { 
 
    var snappedPolyline = new google.maps.Polyline({ 
 
    path: snappedCoordinates, 
 
    strokeColor: 'black', 
 
    strokeWeight: 3 
 
    }); 
 

 
    snappedPolyline.setMap(map); 
 
    polylines.push(snappedPolyline); 
 
} 
 

 
$(window).load(initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="map"></div>

JSFiddle:https://jsfiddle.net/y6nkjhfh

Answer 1

Sie haben die Punkte im falschen Format für das Snap auf Straßen API.

Pfad - Der zu erfassende Pfad. Der Pfadparameter akzeptiert eine Liste von Längen-/Breitenpaaren. Breite und Länge Werte sollten durch Kommas getrennt werden. Koordinaten sollten durch das Pipe-Zeichen getrennt werden: "|".

Ihre Punkte sind in der Reihenfolge Länge/Breite (das ist, was GeoJSON angibt), und sind nicht durch die "|" Pfeifencharakter.

Um sie in das richtige Format zu setzen:

for (var i = 0; i < lines.length; i++) { 
    var coords = []; 
    for (var j=0; j<lines[i].geometry.coordinates.length; j++) { 
    coords.push([lines[i].geometry.coordinates[j][1],lines[i].geometry.coordinates[j][0]]); 
    } 
    console.log('array: ', coords); 
    runSnapToRoad(coords); 
} 

proof of concept fiddle (the snapped lines are blue)

aktualisierten Code-Schnipsel:

function initMap() { 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: { 
 
     lat: 40.749481, 
 
     lng: -73.974290 
 
    } 
 
    }; 
 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    map.data.addGeoJson(data); 
 

 
    var lines = data.features; 
 
    for (var i = 0; i < lines.length; i++) { 
 
    var coords = []; 
 
    for (var j = 0; j < lines[i].geometry.coordinates.length; j++) { 
 
     coords.push([lines[i].geometry.coordinates[j][1], lines[i].geometry.coordinates[j][0]]); 
 
    } 
 
    console.log('array: ', coords); 
 
    runSnapToRoad(coords); 
 
    } 
 
} 
 

 
// Snap a user-created polyline to roads and draw the snapped path 
 
function runSnapToRoad(finalArray) { 
 
    $.get('https://roads.googleapis.com/v1/snapToRoads', { 
 
    interpolate: true, 
 
    key: apiKey, 
 
    path: finalArray.join('|') 
 
    }, function(data) { 
 
    processSnapToRoadResponse(data); 
 
    drawSnappedPolyline(); 
 
    }); 
 
} 
 

 
// Store snapped polyline returned by the snap-to-road service. 
 
function processSnapToRoadResponse(data) { 
 
    snappedCoordinates = []; 
 
    placeIdArray = []; 
 
    for (var i = 0; i < data.snappedPoints.length; i++) { 
 
    var latlng = new google.maps.LatLng(
 
     data.snappedPoints[i].location.latitude, 
 
     data.snappedPoints[i].location.longitude); 
 
    snappedCoordinates.push(latlng); 
 
    placeIdArray.push(data.snappedPoints[i].placeId); 
 
    } 
 
} 
 

 
// Draws the snapped polyline (after processing snap-to-road response). 
 
function drawSnappedPolyline() { 
 
    var snappedPolyline = new google.maps.Polyline({ 
 
    path: snappedCoordinates, 
 
    strokeColor: 'blue', 
 
    strokeWeight: 3 
 
    }); 
 
    snappedPolyline.setMap(map); 
 
    polylines.push(snappedPolyline); 
 
} 
 

 
$(window).load(initMap); 
 
var data = { 
 
    "type": "FeatureCollection", 
 
    "features": [{ 
 
    "type": "Feature", 
 
    "properties": {}, 
 
    "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
     [-73.97056102752686, 40.74811853855757], 
 
     [-73.96944522857666, 40.74953279908402], 
 
     [-73.96798610687256, 40.75135341202851], 
 
     [-73.97109746932983, 40.75314146550602], 
 
     [-73.97472381591797, 40.75346656097219], 
 
     [-73.97573232650755, 40.75182481261268], 
 
     [-73.97721290588379, 40.750768220446936], 
 
     [-73.97757768630981, 40.74940275339479] 
 
     ] 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "properties": {}, 
 
    "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
     [-73.96279335021973, 40.75512452312348], 
 
     [-73.96549701690674, 40.75109332751696], 
 
     [-73.96974563598633, 40.74719193776603], 
 
     [-73.9726209640503, 40.74481848035928], 
 
     [-73.97279262542723, 40.74137193935539] 
 
     ] 
 
    } 
 
    }, { 
 
    "type": "Feature", 
 
    "properties": {}, 
 
    "geometry": { 
 
     "type": "LineString", 
 
     "coordinates": [ 
 
     [-74.00107383728026, 40.75931800754126], 
 
     [-73.99519443511963, 40.757270059827206], 
 
     [-73.99536609649658, 40.75453936473234], 
 
     [-73.99888515472412, 40.75304393655622] 
 
     ] 
 
    } 
 
    }] 
 
}; 
 

 
var apiKey = 'AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM'; 
 

 
var map; 
 
var snappedCoordinates = []; 
 
var coords; 
 
var subArray; 
 
var placeIdArray = []; 
 
var finalArray = []; 
 
var polylines = [];

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
#panel { 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 50%; 
 
    margin-left: -180px; 
 
    z-index: 5; 
 
    background-color: #fff; 
 
    padding: 5px; 
 
    border: 1px solid #999; 
 
} 
 

 
#bar { 
 
    width: 240px; 
 
    background-color: rgba(255, 255, 255, 0.75); 
 
    margin: 8px; 
 
    padding: 4px; 
 
    border-radius: 4px; 
 
} 
 

 
#autoc { 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
}

<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?key=AIzaSyA5KqqUzvJyoC9msz_70ns-CdAF33N-6tM"></script> 
 
<div id="map"></div>