如何在谷歌地圖中的兩個標記之間繪製路線

嗨我想繪製使用JavaScript的兩個標記之間的路線圖。我嘗試過在線發現的各種示例，但嘗試使用不同的示例時我的地圖未加載。我無法找出錯誤的原因。我的地圖只是不加載。如何在谷歌地圖中的兩個標記之間繪製路線

我想爲下面兩個標記繪製路線。

<script> 

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

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

      function calcRoute() { 
       var start = new google.maps.LatLng(37.334818, -121.884886); 
       var end = new google.maps.LatLng(38.334818, -181.884886); 
       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); 
     } 
     mapLocation(); 
    </script>

有人能幫我畫兩條標記之間的路線嗎？

來源

2014-12-07 Monica T

這裏有一個[文檔示例]（https://developers.google.com/maps/documentation/javascript/examples/directions-simple）。 – mensi 2014-12-07 09:13:12

我只是得到一個沒有地圖的空白屏幕： - | – 2014-12-07 09:24:12

從'mapLocation'函數中獲取'initialize'函數。在地圖初始化或地圖「空閒」事件後，從'initialize'函數內調用'mapLocation'。檢查您的JavaScript控制檯是否有錯誤。 – MrUpsidown 2014-12-07 09:35:03

兩點意見：

你的問題問及標記之間的方向，但在您發佈的代碼沒有任何標記。 LatLng對象定義了兩個位置。路線服務將自動在路線的起點和終點添加標記。如果您想要在兩個標記之間獲取方向，則需要先將它們添加到地圖中。
在發佈代碼中沒有調用calcRoute（我添加了一個「路由」按鈕，導致它被執行）。

問題：

方向服務返回ZERO_RESULTS您的原始分，所以沒有路線繪製。在else情況下爲if (status == "OK")測試添加錯誤處理以查看該錯誤。
如果我改變實際可路由點的地方（帕洛阿爾託，CA），路線服務的路線不被渲染，因爲你永遠不設定路線服務的「地圖」屬性

working fiddle

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

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

    function calcRoute() { 
     var start = new google.maps.LatLng(37.334818, -121.884886); 
     //var end = new google.maps.LatLng(38.334818, -181.884886); 
     var end = new google.maps.LatLng(37.441883, -122.143019); 
     var bounds = new google.maps.LatLngBounds(); 
     bounds.extend(start); 
     bounds.extend(end); 
     map.fitBounds(bounds); 
     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); 
       directionsDisplay.setMap(map); 
      } else { 
       alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
      } 
     }); 
    } 

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

工作代碼片段：

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

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

 
    function calcRoute() { 
 
    var start = new google.maps.LatLng(37.334818, -121.884886); 
 
    //var end = new google.maps.LatLng(38.334818, -181.884886); 
 
    var end = new google.maps.LatLng(37.441883, -122.143019); 
 
    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); 
 
     directionsDisplay.setMap(map); 
 
     } else { 
 
     alert("Directions Request from " + start.toUrlValue(6) + " to " + end.toUrlValue(6) + " failed: " + status); 
 
     } 
 
    }); 
 
    } 
 

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

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input type="button" id="routebtn" value="route" /> 
 
<div id="map-canvas"></div>

來源

2014-12-07 15:06:12 geocodezip

比我的答案好得多！ – gothical 2014-12-07 19:36:09

不少錯誤。首先是地理位置。你的第二個位置是錯誤的，因爲經度只能從+180到-180，所以-181在地球上不存在！其次，正如評論中提到的Mr.Upsidedown，你正在調用一個函數內的函數。首先修正地理位置，然後調用函數，以解決您遇到的問題。

來源

2014-12-07 10:10:54 gothical

如何在谷歌地圖中的兩個標記之間繪製路線

回答

相關問題