如何使用SnapToRoad的响应
How to use a response of SnapToRoad?
我想知道如何在javascript代码中接收谷歌地图SnapToRoad响应,以及如何使用响应来生成带有SnapToRoad响应的地图(在javascript中也是如此)。我试图在一个html页面做这样的事情。
我已经测试了我的API Key,它正在工作,我收到了roads.googleapis.com的响应,但我找不到任何可以帮助我解决这些问题的东西
示例(从Android手机上的GPS捕获的37点数据,开始为两个数据集,其中一个数据集有250点,DP简化后为17点,第二组数据集为503点,DP简化后减少为37点),在Google Maps JavaScript API v3地图上显示返回的数据作为Polyline。
注:最大请求为100分。
代码片段:
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>
相关文章:
- 如何将getJson的响应保存在全局变量中
- 如何使用Spring MVC将Facebook返回的响应数据保存在Java类中
- 使用angularjs向浏览器发送servlet响应(下载功能)
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 不再使用innerHTML进行AJAX响应.(代码未得到响应)
- 为什么可以't我使用了AJAX响应的一部分
- 响应动画手风琴不工作
- 如何从SeleniumWebdriver获取异步Javascript响应
- Ajax调用在Firefox中不会自动响应
- 可以在响应时隐藏iphone上的“播放”按钮以进行视频播放
- 由于响应中不存在“Access Control Allow Origin”标头,跨域请求停止工作
- 如何在 JavaScript 和 HTML 中更改对输入框的提示响应
- IIS动态HTTP响应标头
- 预期响应包含一个对象,但在angular js中得到一个数组错误
- Ajax响应转换
- 使Intro.js工具提示响应
- 存储$http如何从$http函数(Angularjs)外部获取可访问变量中的响应
- 将高图饼图中的文本居中显示为响应
- Css转换没有响应
- 如何使用SnapToRoad的响应