谷歌地圖api不返回lat和lng值？

Question

以下是截圖。通常，Google地圖會返回行程步驟的緯度值。現在所有正在重新調整的是function()。我如何解決？

我沒有改變我的任何代碼，爲什麼不返回的緯度經度值？

Answer 1

因此，根據Google Maps API參考（https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsService），start_location返回<LatLng>類型。 A LatLng類有lat()和lng()方法爲您獲得number緯度/經度值。

Answer 2

的google.maps.LatLng type這些值，你可以使用 lat()/lng()函數來獲取緯度/經度值或toString()/toUrlValue()得到字符串表示。

下面的例子演示瞭如何從導航服務響應

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); 
 

 
    var onChangeHandler = function() { 
 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
 
    }; 
 
    document.getElementById('start').addEventListener('change', onChangeHandler); 
 
    document.getElementById('end').addEventListener('change', onChangeHandler); 
 
} 
 

 
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); 
 
      if(response.routes.length > 0) 
 
       printRoute(response.routes[0]); 
 
     } else { 
 
      window.alert('Directions request failed due to ' + status); 
 
     } 
 
    }); 
 
} 
 

 

 
function printRoute(route) 
 
{ 
 
    var json = JSON.stringify(route, convertLatLngValue, 2); 
 
    document.getElementById('output').innerHTML = json; 
 
} 
 

 

 
function convertLatLngValue(key,value) 
 
{ 
 
    if (key=="lat" || key=="lng") { 
 
     return value(); 
 
    }  
 
    else 
 
     return value; 
 
}

 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; 
 
     } 
 

 
     #map-container { 
 
      width: 64.9%; 
 
      height: 100%; 
 
      margin-left: auto; 
 
      margin-right: auto; 
 
      position: relative; 
 
      float: right; 
 
      z-index: 0; 
 
     } 
 

 
     #panel { 
 
      float: left; 
 
      width: 35%; 
 
      height: 400px; 
 
      box-shadow: 0 4px 16px rgba(0,0,0,0.2); 
 
      outline: 1px solid rgba(0,0,0,0.2); 
 
      z-index: 100; 
 
      overflow: auto; 
 
     }

<div id="panel"> 
 
      <pre id="output"></pre> 
 
</div> 
 
<div id="map-container"> 
 
      <div id="floating-panel"> 
 
       <b>Start: </b> 
 
       <select id="start"> 
 
        <option value="chicago, il">Chicago</option> 
 
        <option value="st louis, mo">St Louis</option> 
 
        <option value="joplin, mo">Joplin, MO</option> 
 
        <option value="oklahoma city, ok">Oklahoma City</option> 
 
        <option value="amarillo, tx">Amarillo</option> 
 
        <option value="gallup, nm">Gallup, NM</option> 
 
        <option value="flagstaff, az">Flagstaff, AZ</option> 
 
        <option value="winona, az">Winona</option> 
 
        <option value="kingman, az">Kingman</option> 
 
        <option value="barstow, ca">Barstow</option> 
 
        <option value="san bernardino, ca">San Bernardino</option> 
 
        <option value="los angeles, ca">Los Angeles</option> 
 
       </select> 
 
       <b>End: </b> 
 
       <select id="end" > 
 
        <option value="chicago, il">Chicago</option> 
 
        <option value="st louis, mo">St Louis</option> 
 
        <option value="joplin, mo">Joplin, MO</option> 
 
        <option value="oklahoma city, ok">Oklahoma City</option> 
 
        <option value="amarillo, tx">Amarillo</option> 
 
        <option value="gallup, nm">Gallup, NM</option> 
 
        <option value="flagstaff, az">Flagstaff, AZ</option> 
 
        <option value="winona, az">Winona</option> 
 
        <option value="kingman, az">Kingman</option> 
 
        <option value="barstow, ca">Barstow</option> 
 
        <option value="san bernardino, ca">San Bernardino</option> 
 
        <option value="los angeles, ca">Los Angeles</option> 
 
       </select> 
 
      </div> 
 
      <div id="map"></div> 
 
</div> 
 
      
 
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" 
 
       async defer></script>