道路 API 使用 GeoJSON 捕捉到道路
Roads API Snap to Road Using GeoJSON
我有 3 个 LineString 功能。我正在尝试将这 3 个 LineString 要素的坐标发送到 Roads API，这样我就可以在地图上获得清晰的捕捉线。我一直在尝试调整 example outlined by Google，但为了 GeoJSON 功能。在地图加载时，所有 3 个功能都应捕捉到 Google 的道路网络。
问题是我收到了一个错误，即使我认为我正在正确传递坐标作为 "path"。我得到的错误代码是 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
您的道路捕捉格式错误 API。
path — The path to be snapped. The path parameter accepts a list of latitude/longitude pairs. Latitude and longitude values should be separated by commas. Coordinates should be separated by the pipe character: "|".
您的积分顺序为 longitude/latitude（这是 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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
我有 3 个 LineString 功能。我正在尝试将这 3 个 LineString 要素的坐标发送到 Roads API，这样我就可以在地图上获得清晰的捕捉线。我一直在尝试调整 example outlined by Google，但为了 GeoJSON 功能。在地图加载时，所有 3 个功能都应捕捉到 Google 的道路网络。
问题是我收到了一个错误，即使我认为我正在正确传递坐标作为 "path"。我得到的错误代码是 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
您的道路捕捉格式错误 API。
path — The path to be snapped. The path parameter accepts a list of latitude/longitude pairs. Latitude and longitude values should be separated by commas. Coordinates should be separated by the pipe character: "|".
您的积分顺序为 longitude/latitude（这是 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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>