个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我从我的服务器收到一个 JSON 响应，该响应具有方向 API 响应，但附加了其他信息。我尝试在响应的步骤对象中使用起始位置和结束位置的经纬度和折线，但折线最终添加了与道路不重合的直线。有什么方法可以在谷歌地图上绘制路线我的回应。任何示例或演示将不胜感激。
下面是我从服务器获取的 JSON 文本。
{
"geocoded_waypoints": [{
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJ9T_5iuTKj4ARe3GfygqMnbk",
"types": ["locality", "political"]
}, {
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJk8EIXIG3j4ARwL_Ao3ykdeQ",
"types": ["locality", "political"]
}],
"routes": [{
"bounds": {
"northeast": {
"lat": 37.3585307,
"lng": -121.8863279
},
"southwest": {
"lat": 37.3371729,
"lng": -121.9553899
}
},
"copyrights": "Map data ©2015 Google",
"legs": [{
"distance": {
"text": "5.0 mi",
"value": 8019
},
"duration": {
"text": "14 mins",
"value": 821
},
"end_address": "Santa Clara, CA, USA",
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"start_address": "San Jose, CA, USA",
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"steps": [{
"distance": {
"text": "0.1 mi",
"value": 224
},
"duration": {
"text": "1 min",
"value": 43
},
"end_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"html_instructions": "Head \u003cb\u003esouthwest\u003c/b\u003e on \u003cb\u003eE Santa Clara St\u003c/b\u003e toward \u003cb\u003eS 4th St\u003c/b\u003e",
"polyline": {
"points": "yr{bFp||fVXr@BFBHfAtCt@nBn@dB"
},
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 565
},
"duration": {
"text": "1 min",
"value": 82
},
"end_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 2nd cross street onto \u003cb\u003eN 3rd St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "il{bFbj}fVoAx@c@VuDhCwAbAiEnCqAx@uAz@yB`B"
},
"start_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 352
},
"duration": {
"text": "2 mins",
"value": 91
},
"end_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e at the 3rd cross street onto \u003cb\u003eE Julian St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "wg|bFj~}fVx@vBFN^dA|@|Bb@hABJBB@FdBvEPd@"
},
"start_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 564
},
"duration": {
"text": "1 min",
"value": 45
},
"end_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "q}{bFvs~fVLZaA`AiAjAOPKLMPMR{@`Be@z@iC`FKXGLELENEPCNENALCNAR?FAJ?T?Z@V@NBRDVDXBJBLBHBHBJ"
},
"start_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.8 mi",
"value": 1241
},
"duration": {
"text": "2 mins",
"value": 100
},
"end_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 1st cross street onto \u003cb\u003eGuadalupe Pkwy\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "ek|bF~s_gVgClAcJjEi@X]Pm@\\_An@cAx@e@d@o@p@oAtA_ApAq@dA]l@w@zAk@lA]x@Qd@_@|@Q`@Yv@KXEJGRMXMRIRQV_@f@OTOPSVSTWVQPQPWPc@^YVQJC@_@Va@V"
},
"start_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 692
},
"duration": {
"text": "1 min",
"value": 67
},
"end_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eW Hedding St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "e`~bFxiagVMLTb@?@P\\@@NXVRl@~@p@bA@Br@fAJNJLLTp@bALT`@n@n@dAFJz@tAr@fAh@|@hBvCT\\hBxC"
},
"start_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "1.5 mi",
"value": 2437
},
"duration": {
"text": "3 mins",
"value": 201
},
"end_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "gg}bFfnbgVDR@H@H@H?F?FAF?DAFADAFIRg@b@aBdBUVgA~AcB`C}@lAY^U\\W\\OTSVA@Y`@eCjDaArAmAbB_@p@IPs@hBaA`CCDe@jAg@jAKXUh@MZSf@k@dBm@dBCDAFIh@m@xAw@pBu@hB}@dCUl@]ZAB[x@_BzDgBnE_AfCiApCIl@Uj@c@fASf@[v@IVGREPGPETEVCTIl@AVC\\AvAAh@A|BGnBC^CRE`@EZCHI^CNGNENYp@e@hASNGFIPo@pA"
},
"start_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.3 mi",
"value": 468
},
"duration": {
"text": "1 min",
"value": 28
},
"end_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"html_instructions": "Take the ramp on the \u003cb\u003eleft\u003c/b\u003e to \u003cb\u003eCalifornia 82\u003c/b\u003e/\u003cb\u003eSanta Clara\u003c/b\u003e",
"polyline": {
"points": "_n_cFv|fgV@L?@?@A@?@ABSf@]bAO^Uv@GPEPENALETAJ?HAR?J?L@R?JBTBNBLBJDNFPHPFLNRJNLLHFLJt@^j@V\\Rf@^ZVPRZ^"
},
"start_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "341 ft",
"value": 104
},
"duration": {
"text": "1 min",
"value": 6
},
"end_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"html_instructions": "Merge onto \u003cb\u003eDe La Cruz Blvd\u003c/b\u003e",
"maneuver": "merge",
"polyline": {
"points": "sf_cFpuggVp@n@n@n@p@n@"
},
"start_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 272
},
"duration": {
"text": "1 min",
"value": 22
},
"end_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"html_instructions": "Take the \u003cb\u003eEl Camino Real\u003c/b\u003e ramp",
"polyline": {
"points": "_b_cF`zggVHTFPDLBJ@H@F@L?J@NATCRCXCNAR?N?P?J?R@P@V@PBVBLBJLd@Tf@Vl@DH@@@@?@@@B@B?HB"
},
"start_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.6 mi",
"value": 904
},
"duration": {
"text": "2 mins",
"value": 109
},
"end_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"html_instructions": "Slight \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eEl Camino Real\u003c/b\u003e",
"maneuver": "turn-slight-right",
"polyline": {
"points": "_~~bFjkhgVP`@FN@DZ|@@D\\pA^tAt@tCt@zC\\pA`@~Al@jC`@vAv@rCrAjFTbAJn@Jr@HbAJpA@rA?bB"
},
"start_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.1 mi",
"value": 196
},
"duration": {
"text": "1 min",
"value": 27
},
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eLincoln St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "yk~bFlfjgVeClA{@b@m@Z[Ja@RQH"
},
"start_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"travel_mode": "DRIVING"
}],
"via_waypoint": []
}],
"overview_polyline": {
"points": "yr{bFp||fVhBzEdBtEsBpAmGlE{GhEuAz@yB`B`AfCdCxG|BhGLZaA`AyA|AY^iAtBoD|GSf@U~@M`AAdALrAP|@FTkNxGgAj@mBlAiB~A_CfCqBvCuAhCiAfCq@bB}@~Bm@tAqAfBqAvAgBzAwA|@MLTb@?@R^NXVR~AbClAhBnB~CzL|RJp@A\\Oh@g@b@aBdB}AvB{DnF}@pAuDfFoCvDi@bA_D|HwAjDqBxFKp@eBjEsBnFUl@]Z]|@gEjKiCxGIl@Uj@w@nBe@nA[lAUrBI|GKnCIt@WtAmAzC[Vy@bB?Rs@pBs@zBO~@Av@HdATz@P^Zb@VTbAj@hAj@bAv@l@r@`B~Ap@n@HTL^Hj@@ZEh@IlA@bAJnAPp@l@tAHNRFv@tBtBbIbDxMxAjFhBnHVbBTtC@vDaEpB}BdA"
},
"summary": "Coleman Ave",
"warnings": [],
"waypoint_order": [],
"info": "XYZ"
}],
"status": "OK"
}
最佳答案
提供的路线服务响应需要进行以下调整才能通过 DirectionsRenderer 呈现
DirectionsRenderer.setDirections 函数需要request.travelMode 属性要指定，例如response.request = {travelMode: "DRIVING"};google.maps.LatLng 对象值(请参阅deserializeLatLng下面的函数如何从一种转换为另一种)google.maps.LatLngBounds 对象值step 属性必须包含path 属性(见下文deserializeRoute 函数介绍如何构造 path 属性现有的polyline属性)话虽如此，以下示例展示了如何修复响应以呈现路线:
function deserializeRoute(response){
response['request'] = {travelMode: "DRIVING"};
response.routes.forEach(function (route, i) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(deserializeLatLng(route.bounds.northeast));
bounds.extend(deserializeLatLng(route.bounds.southwest));
route.bounds = bounds;
route.legs.forEach(function (leg, i) {
leg.start_location = deserializeLatLng(leg.start_location);
leg.end_location = deserializeLatLng(leg.end_location);
leg.steps.forEach(function (step, i) {
step.start_location = deserializeLatLng(step.start_location);
step.end_location = deserializeLatLng(step.end_location);
step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
});
});
});
return response;
}
哪里
function deserializeLatLng(value)
{
return new google.maps.LatLng(value.lat,value.lng);
}
实例
以下示例演示了如何:
DirectionsService 计算路线并渲染它(出于比较原因)var savedResponse = {
"geocoded_waypoints": [
{
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJ9T_5iuTKj4ARe3GfygqMnbk",
"types": ["locality", "political"]
}, {
"geocoder_status": "OK",
"partial_match": true,
"place_id": "ChIJk8EIXIG3j4ARwL_Ao3ykdeQ",
"types": ["locality", "political"]
}
],
"routes": [
{
"bounds": {
"northeast": {
"lat": 37.3585307,
"lng": -121.8863279
},
"southwest": {
"lat": 37.3371729,
"lng": -121.9553899
}
},
"copyrights": "Map data ©2015 Google",
"legs": [
{
"distance": {
"text": "5.0 mi",
"value": 8019
},
"duration": {
"text": "14 mins",
"value": 821
},
"end_address": "Santa Clara, CA, USA",
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"start_address": "San Jose, CA, USA",
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"steps": [
{
"distance": {
"text": "0.1 mi",
"value": 224
},
"duration": {
"text": "1 min",
"value": 43
},
"end_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"html_instructions": "Head \u003cb\u003esouthwest\u003c/b\u003e on \u003cb\u003eE Santa Clara St\u003c/b\u003e toward \u003cb\u003eS 4th St\u003c/b\u003e",
"polyline": {
"points": "yr{bFp||fVXr@BFBHfAtCt@nBn@dB"
},
"start_location": {
"lat": 37.3382088,
"lng": -121.8863279
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 565
},
"duration": {
"text": "1 min",
"value": 82
},
"end_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 2nd cross street onto \u003cb\u003eN 3rd St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "il{bFbj}fVoAx@c@VuDhCwAbAiEnCqAx@uAz@yB`B"
},
"start_location": {
"lat": 37.3371729,
"lng": -121.8885004
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 352
},
"duration": {
"text": "2 mins",
"value": 91
},
"end_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e at the 3rd cross street onto \u003cb\u003eE Julian St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "wg|bFj~}fVx@vBFN^dA|@|Bb@hABJBB@FdBvEPd@"
},
"start_location": {
"lat": 37.3415557,
"lng": -121.8917403
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 564
},
"duration": {
"text": "1 min",
"value": 45
},
"end_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "q}{bFvs~fVLZaA`AiAjAOPKLMPMR{@`Be@z@iC`FKXGLELENEPCNENALCNAR?FAJ?T?Z@V@NBRDVDXBJBLBHBHBJ"
},
"start_location": {
"lat": 37.3399298,
"lng": -121.895162
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.8 mi",
"value": 1241
},
"duration": {
"text": "2 mins",
"value": 100
},
"end_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e at the 1st cross street onto \u003cb\u003eGuadalupe Pkwy\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "ek|bF~s_gVgClAcJjEi@X]Pm@\\_An@cAx@e@d@o@p@oAtA_ApAq@dA]l@w@zAk@lA]x@Qd@_@|@Q`@Yv@KXEJGRMXMRIRQV_@f@OTOPSVSTWVQPQPWPc@^YVQJC@_@Va@V"
},
"start_location": {
"lat": 37.3421053,
"lng": -121.9003158
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.4 mi",
"value": 692
},
"duration": {
"text": "1 min",
"value": 67
},
"end_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"html_instructions": "Turn \u003cb\u003eleft\u003c/b\u003e onto \u003cb\u003eW Hedding St\u003c/b\u003e",
"maneuver": "turn-left",
"polyline": {
"points": "e`~bFxiagVMLTb@?@P\\@@NXVRl@~@p@bA@Br@fAJNJLLTp@bALT`@n@n@dAFJz@tAr@fAh@|@hBvCT\\hBxC"
},
"start_location": {
"lat": 37.3505911,
"lng": -121.9089328
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "1.5 mi",
"value": 2437
},
"duration": {
"text": "3 mins",
"value": 201
},
"end_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eColeman Ave\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "gg}bFfnbgVDR@H@H@H?F?FAF?DAFADAFIRg@b@aBdBUVgA~AcB`C}@lAY^U\\W\\OTSVA@Y`@eCjDaArAmAbB_@p@IPs@hBaA`CCDe@jAg@jAKXUh@MZSf@k@dBm@dBCDAFIh@m@xAw@pBu@hB}@dCUl@]ZAB[x@_BzDgBnE_AfCiApCIl@Uj@c@fASf@[v@IVGREPGPETEVCTIl@AVC\\AvAAh@A|BGnBC^CRE`@EZCHI^CNGNENYp@e@hASNGFIPo@pA"
},
"start_location": {
"lat": 37.3465959,
"lng": -121.9147607
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.3 mi",
"value": 468
},
"duration": {
"text": "1 min",
"value": 28
},
"end_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"html_instructions": "Take the ramp on the \u003cb\u003eleft\u003c/b\u003e to \u003cb\u003eCalifornia 82\u003c/b\u003e/\u003cb\u003eSanta Clara\u003c/b\u003e",
"polyline": {
"points": "_n_cFv|fgV@L?@?@A@?@ABSf@]bAO^Uv@GPEPENALETAJ?HAR?J?L@R?JBTBNBLBJDNFPHPFLNRJNLLHFLJt@^j@V\\Rf@^ZVPRZ^"
},
"start_location": {
"lat": 37.3579154,
"lng": -121.9375606
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "341 ft",
"value": 104
},
"duration": {
"text": "1 min",
"value": 6
},
"end_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"html_instructions": "Merge onto \u003cb\u003eDe La Cruz Blvd\u003c/b\u003e",
"maneuver": "merge",
"polyline": {
"points": "sf_cFpuggVp@n@n@n@p@n@"
},
"start_location": {
"lat": 37.3567446,
"lng": -121.9415299
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.2 mi",
"value": 272
},
"duration": {
"text": "1 min",
"value": 22
},
"end_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"html_instructions": "Take the \u003cb\u003eEl Camino Real\u003c/b\u003e ramp",
"polyline": {
"points": "_b_cF`zggVHTFPDLBJ@H@F@L?J@NATCRCXCNAR?N?P?J?R@P@V@PBVBLBJLd@Tf@Vl@DH@@@@?@@@B@B?HB"
},
"start_location": {
"lat": 37.3560004,
"lng": -121.9422478
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.6 mi",
"value": 904
},
"duration": {
"text": "2 mins",
"value": 109
},
"end_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"html_instructions": "Slight \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eEl Camino Real\u003c/b\u003e",
"maneuver": "turn-slight-right",
"polyline": {
"points": "_~~bFjkhgVP`@FN@DZ|@@D\\pA^tAt@tCt@zC\\pA`@~Al@jC`@vAv@rCrAjFTbAJn@Jr@HbAJpA@rA?bB"
},
"start_location": {
"lat": 37.3553551,
"lng": -121.9450196
},
"travel_mode": "DRIVING"
}, {
"distance": {
"text": "0.1 mi",
"value": 196
},
"duration": {
"text": "1 min",
"value": 27
},
"end_location": {
"lat": 37.3540533,
"lng": -121.9553899
},
"html_instructions": "Turn \u003cb\u003eright\u003c/b\u003e onto \u003cb\u003eLincoln St\u003c/b\u003e",
"maneuver": "turn-right",
"polyline": {
"points": "yk~bFlfjgVeClA{@b@m@Z[Ja@RQH"
},
"start_location": {
"lat": 37.3524531,
"lng": -121.9544701
},
"travel_mode": "DRIVING"
}
],
"via_waypoint": []
}
],
"overview_polyline": {
"points": "yr{bFp||fVhBzEdBtEsBpAmGlE{GhEuAz@yB`B`AfCdCxG|BhGLZaA`AyA|AY^iAtBoD|GSf@U~@M`AAdALrAP|@FTkNxGgAj@mBlAiB~A_CfCqBvCuAhCiAfCq@bB}@~Bm@tAqAfBqAvAgBzAwA|@MLTb@?@R^NXVR~AbClAhBnB~CzL|RJp@A\\Oh@g@b@aBdB}AvB{DnF}@pAuDfFoCvDi@bA_D|HwAjDqBxFKp@eBjEsBnFUl@]Z]|@gEjKiCxGIl@Uj@w@nBe@nA[lAUrBI|GKnCIt@WtAmAzC[Vy@bB?Rs@pBs@zBO~@Av@HdATz@P^Zb@VTbAj@hAj@bAv@l@r@`B~Ap@n@HTL^Hj@@ZEh@IlA@bAJnAPp@l@tAHNRFv@tBtBbIbDxMxAjFhBnHVbBTtC@vDaEpB}BdA"
},
"summary": "Coleman Ave",
"warnings": [],
"waypoint_order": [],
"info": "XYZ"
}
],
"status": "OK"
};
function initMap() {
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7,
center: { lat: 41.85, lng: -87.65 }
});
directionsDisplay.setMap(map);
document.getElementById('btnCalcRoute').addEventListener('click', function () {
calculateAndDisplayRoute(directionsService, directionsDisplay);
});
document.getElementById('btnLoadRoute').addEventListener('click', function () {
directionsDisplay.setDirections(deserializeRoute(savedResponse));
});
}
function calculateAndDisplayRoute(directionsService, directionsDisplay) {
directionsService.route({
origin: document.getElementById('start').value,
destination: document.getElementById('end').value,
travelMode: google.maps.TravelMode.DRIVING
}, function (response, status) {
if (status === google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
function deserializeRoute(response){
response['request'] = {travelMode: "DRIVING"};
response.routes.forEach(function (route, i) {
var bounds = new google.maps.LatLngBounds();
bounds.extend(deserializeLatLng(route.bounds.northeast));
bounds.extend(deserializeLatLng(route.bounds.southwest));
route.bounds = bounds;
route.legs.forEach(function (leg, i) {
leg.start_location = deserializeLatLng(leg.start_location);
leg.end_location = deserializeLatLng(leg.end_location);
leg.steps.forEach(function (step, i) {
step.start_location = deserializeLatLng(step.start_location);
step.end_location = deserializeLatLng(step.end_location);
step.path = google.maps.geometry.encoding.decodePath(step.polyline.points);
});
});
});
return response;
}
function deserializeLatLng(value)
{
return new google.maps.LatLng(value.lat,value.lng);
}html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto','sans-serif';
line-height: 30px;
padding-left: 10px;
} <div id="floating-panel">
<b>Start: </b>
<select id="start">
<option value="Santa Clara, CA, USA">Santa Clara, CA, USA</option>
</select>
<b>End: </b>
<select id="end">
<option value="San Jose, CA, USA">San Jose, CA, USA</option>
</select>
<button id="btnCalcRoute">Show Route</button><br/>
<span>Display route from saved data:</span><button id="btnLoadRoute">Show Route</button>
</div>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>关于javascript - 使用自定义响应在谷歌地图上绘制路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33366218/
26
4
0
这两个包看起来非常相似: http://www.passportjs.org/packages/passport-google-oauth2/ http://www.passportjs.org/pa
我想在我的网站上添加通过 Google 和 Twitter 登录的按钮。我需要只使用应用程序的客户端而不是服务器端来完成此操作。但我没有找到任何 API。对于我发现的所有内容，我需要使用带有 key
我使用此链接通过 google plus 共享我的页面。 https://plus.google.com/share?url=http%3A%2F%2Fexample.com%2Fcompany%2
我正在尝试学习 google API，并且我的经验是使用 Python，因此我尝试使用 google api python 客户端来访问一些 google 服务，但在构建服务对象时遇到错误。 从 ap
在其实际的实时托管平台上构建实时站点的努力中，有没有办法告诉谷歌不要索引该网站？我发现了以下内容: http://support.google.com/webmasters/bin/answer.py
我正在开发一个 iOS 应用程序。当我运行用于 google+ 登录的程序时，在我点击允许访问按钮后，会显示此消息。 You've reached this page because we have
我有一个非常复杂的网站，每个页面包含 11 个 js 文件。 我最近添加了 google +1 按钮，代码如下: 这会正确显示 +1 按钮，直到我单击它。当我单击它时，出现此错误:https://
我正在尝试使用 google API 创建一个 html 文件，以便在 google MAPS 上显示 KML 文件。 这是 HTML 代码: function initMap() {
我是使用 Google Benchmark 的新手，在本地运行代码与在 Quick-Bench.com 上运行代码时，我收到了运行相同基准测试(下方)的不同结果，该基准测试使用 C++ 检索本地时间.
我已按照 Google 网站上的说明通过添加以下元标记在我的 AngularJS 网站上启用 Ajax 抓取: 呈现的内容有一些链接，如: User 1 User 2 User 3 还有一些呈现动态
通过 Google 手册实现 Google AppInvite - link . 启动 Invite Activity 并在 LogCat 中获取下一步: E/AppInviteAgent: Get
那么有人用过 Google 的 Go 吗？我想知道数学性能(例如触发器)与其他具有垃圾收集器的语言(如 Java 或 .NET)相比如何？ 有人调查过吗？ 最佳答案 理论性能:纯 Go 程序的理论性能
Stackdriver 测试我的网站启动速度慢 我们使用 cloudflare 作为我们的站点 CDN 提供商。我们使用 stackdriver 从外部测试站点可用性，我们将时间检查间隔设置为 1 分
我正在尝试使用 stax.GeneralConv() ( https://jax.readthedocs.io/en/latest/_modules/jax/experimental/stax.htm
我有一个从谷歌金融中提取日内数据的软件。但是，由于昨天 Google 更新了 API，所以软件报错了 Conversion from string HTML HEAD meta http-equiv=
我们在尝试从 Google 获取 oAuth token 时遇到“redirect_uri_mismatch”错误: [client 127.0.0.1:49892] {\n "error" : "
我的网站正在使用 Google reCAPTCHA 控件，但我听说它被阻止了 中国，反正我看到有人报告说将 API 更改为 https://www.recaptcha.net在中国工作？ Anyone
背景 WordPress Google Adsense 谷歌自动插入 anchor 定广告 https://pptmon.com 问题 如下图所示，主播广告的容器高度太大了! 如何调整高度？ 这是谷歌
我在使用 Google Colab 时遇到问题。当我想制作一个新的 Python3 Notebook 时，由于我登录了我的 Google 帐户，因此无法加载刚刚打开的新页面。 我该怎么办？ 感谢您的帮
我正在使用 facebook和 google oauth2使用 passport js 登录, 有了这个流 用户点击登录按钮 重定向到 facebook/google auth 页面(取决于用户选择的
我是一名优秀的程序员,十分优秀！