使用自定义响应在谷歌地图上绘制路线

提供的方向服务响应在通过DirectionsRenderer 提供之前需要进行以下调整

• DirectionsRenderer.setDirections函数期望request.travelMode属性，例如response.request = {travelMode: "DRIVING"};
• 而不是LatLng文字响应必须包含google.maps.LatLng对象值（参见deserializeLatLng下面的函数如何从一个转换为另一个）
• 文字响应必须包含而不是Boundsgoogle.maps.LatLngBounds对象值
• step属性必须包含path属性（请参阅下文关于如何从中构造path属性的deserializeRoute函数现有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>