谷歌地圖方向服務沒有顯示路線

-1

我用谷歌地圖API提供的簡單的方向服務API示例，而地圖似乎調整以顯示兩個不同的點，沒有路線或標記繪製。谷歌地圖方向服務沒有顯示路線

以下是我有：

var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map;  

function initialize(data) { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
      var mapOptions = { 
      zoom:7, 
      center: chicago 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
      directionsDisplay.setMap(map); 

     } 

     function calcRoute() { 
      var start = "chicago, il"; 
      var end = "st louis, mo"; 
      var request = { 
       origin:start, 
       destination:end, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
      }); 
     } 


<div style="height: 25rem; width: 40rem;" id="map-canvas"></div>

什麼我在我的代碼缺少顯示的默認標記和路徑線？

非常感謝

來源

2015-06-19 appthat

你是否在調用'calcRoute'函數？ [當我在'initialize'函數內調用它時，它可以工作]（http://jsfiddle.net/w4tzk13c/） – geocodezip

@geocodezip我確實有一個調用calcRoute（）的html按鈕，它會導致對地圖的反應，但標記和折線缺失。 – appthat

我沒有看到你的問題。我的評論中的小提琴起作用（它包含發佈的代碼，但在'initialize'中調用'calcRoute（）'）。您遇到的問題不在您提供的信息中。請提供一個[最小，完整，測試和可讀的示例]（http://stackoverflow.com/help/mcve），說明您所問的問題。 – geocodezip

-1

必須初始化後某處調用calcRoute（）..你可以在初始化結束做到這一點（）;例如：

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title>Directions service</title> 
    <style> 
     html, body, #map-canvas { 
      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; 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script> 
    <script> 
     var directionsDisplay; 
     var directionsService = new google.maps.DirectionsService(); 
     var map; 

     function initialize() { 
      directionsDisplay = new google.maps.DirectionsRenderer(); 
      var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
      var mapOptions = { 
       zoom: 7, 
       center: chicago 
      }; 
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
      directionsDisplay.setMap(map); 
      calcRoute(); 
     } 

     function calcRoute() { 
      var start = "chicago, il"; 
      var end = "st louis, mo"; 
      var request = { 
       origin:start, 
       destination:end, 
       travelMode: google.maps.TravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
      }); 
     } 


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

    </script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html>

來源

2015-06-19 17:32:11

很明顯很明顯，你指出的HTML是嚴格的改變開始和結束值。 css不會爲路線做任何事情，或者只是設置地圖邊界以及下拉選擇框的外觀。 – appthat

我改變了我的答案，你可以在上面看到它 –

谷歌地圖方向服務沒有顯示路線

回答

相關問題