在Google地圖V3中顯示沒有DirectionsRenderer的路線

Question

我試圖繪製自己的路線，但沒有DirectionsRenderer。

這裏是我的代碼：

var map; 
var directionsService; 

function initialize() { 
    var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP } 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    directionsService = new google.maps.DirectionsService(); 

    calcRoute(); 
} 

function calcRoute() { 
    var request = { 
     origin: 'שדי חמד', 
     destination: 'כפר סבא', 
     travelMode: google.maps.TravelMode.WALKING 
    }; 

    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     map.fitBounds(directionResult.routes[0].bounds); 
     createPolyline(response); 
    } 
    }); 
} 

function createPolyline(directionResult) { 
    var line = new google.maps.Polyline({ 
     path: directionResult.routes[0].overview_path, 
     strokeColor: '#FF0000', 
     strokeOpacity: 0.5, 
     strokeWeight: 4 
    }); 

    line.setMap(map); 

    for (var i = 0; i < line.getPath().length; i++) { 
     var marker = new google.maps.Marker({ 
      icon: { path: google.maps.SymbolPath.CIRCLE, scale: 3 }, 
      position: line.getPath().getAt(i), 
      map: map 
     }); 
    } 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

我得到的是一個灰色的窗口，甚至沒有一張地圖。
當發送DirectionsService's響應DirectionsRenderer我得到兩個折線。

任何建議將受到歡迎。

Answer 1

我得到這一行JavaScript錯誤 「directionResult是不確定的」

：

map.fitBounds(directionResult.routes[0].bounds); 

如果我修復（將其更改爲響應），它的工作原理。

working example

順便說一句 - 我不會建議使用overview_path;如果路徑很長或很複雜，則沒有足夠的細節。

代碼片斷：

var map; 
 
var directionsService; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
 

 
    directionsService = new google.maps.DirectionsService(); 
 
    calcRoute(); 
 
} 
 

 
function calcRoute() { 
 
    var request = { 
 
    origin: 'שדי חמד', 
 
    destination: 'כפר סבא', 
 
    travelMode: google.maps.TravelMode.WALKING 
 
    }; 
 

 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     map.fitBounds(response.routes[0].bounds); 
 
     createPolyline(response); 
 
    } 
 
    }); 
 
} 
 

 
function createPolyline(directionResult) { 
 
    var line = new google.maps.Polyline({ 
 
    path: directionResult.routes[0].overview_path, 
 
    strokeColor: '#FF0000', 
 
    strokeOpacity: 0.5, 
 
    strokeWeight: 4 
 
    }); 
 

 
    line.setMap(map); 
 

 
    for (var i = 0; i < line.getPath().length; i++) { 
 
    var marker = new google.maps.Marker({ 
 
     icon: { 
 
     path: google.maps.SymbolPath.CIRCLE, 
 
     scale: 3 
 
     }, 
 
     position: line.getPath().getAt(i), 
 
     map: map 
 
    }); 
 
    } 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>