로드 API GeoJSON을 사용하여 도로에 스냅

Question

3 개의 LineString 기능이 있습니다. 이 3 LineString 기능의 좌표를 Roads API에 보내려고하면지도에서 깨끗하고 짤린 선을 얻을 수 있습니다. 나는 example outlined by Google을 조정하려고 시도했지만 GeoJSON 기능은 사용하지 않았습니다. 지도를로드 할 때 3 가지 기능 모두 Google의 도로 네트워크에 스냅해야합니다.

문제는 좌표를 올바르게 "경로"로 전달한다고 생각하더라도 오류가 발생한다는 것입니다. 오류 코드는 400이고 메시지는 "\"path\" contains an invalid value 및 status: "INVALID_ARGUMENT입니다.

코드 조각 :

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

당신은 도로 API에 스냅에 대한 잘못된 형식의 점을 가지고있다.

경로 - 스냅 할 경로입니다. path 매개 변수는 위도/경도 쌍 목록을 허용합니다. 위도 및 경도 값은 쉼표로 구분해야합니다. 좌표는 파이프 문자 "|"로 구분해야합니다.

포인트의 위도/경도 (GeoJSON이 지정하는 것임)가 있으며 "|" 파이프 문자.

올바른 형식에 넣어하려면 :

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)

업데이트 코드 :

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>