谷歌地球的高程值

以下URL通過點擊地圖上得到提升提供了一個很好的例子..谷歌地球的高程值

https://developers.google.com/maps/documentation/javascript/examples/elevation-simple

我要進入的不是點擊具體的經緯度值。

輸入lat-long時，使用以下HTML和javascript結果「未定義」。我錯過了什麼？

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<h1>Enter Lat-Long to get Google Earth Level</h1> 
 

 
<p>Lat:</p> 
 
<input id="lat" type="number"> 
 

 
<p>Long:</p> 
 
<input id="long" type="number"> 
 
<button type="button" onclick="myFunction()">Submit</button> 
 

 
<p id="level"></p> 
 

 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 

 
<script> 
 

 
function myFunction() { 
 
    var elevator = new google.maps.ElevationService(); 
 
    var denali = new google.maps.LatLng(document.getElementById('lat').value , document.getElementById('long').value); 
 
    var positionalRequest = {'locations':[denali]}; 
 

 
    var text; 
 

 
    elevator.getElevationForLocations(positionalRequest, function (results, status) { 
 
     if (status == google.maps.ElevationStatus.OK) { 
 

 
      // Retrieve the first result 
 
      if (results[0]) { 
 
       text = results[0].elevation; 
 
      } else { 
 
       alert('No results found'); 
 
      } 
 
     } 
 
     else { 
 
      alert('Elevation service failed due to: ' + status); 
 
     } 
 
    }); 
 

 
    document.getElementById("level").innerHTML = text; 
 
} 
 

 

 
</script> 
 

 
</body> 
 
</html>

來源

2015-01-12 Kevin Barnett

下面是一個例子，具有硬編碼的位置。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
    function getLocations() { 
    var elevator = new google.maps.ElevationService(); 

    // places in Brussels (a city built on hills, so there are altitude differences) 
    var places = [ 
     {name: "Altitude 100", lat: 50.81665455596093, lng: 4.336802423000336}, 
     {name: "Grand Place", lat: 50.84676859190515, lng: 4.352380692958832}, 
     {name: "Atomium", lat: 50.8949350060238, lng: 4.341544568538666} 
    ]; 
    var locations = []; 
    for (var i=0; i<places.length; i++) { 
     locations.push(new google.maps.LatLng(places[i].lat, places[i].lng)); 
    } 
    var positionalRequest = { 
     'locations': locations 
    } 
    // Initiate the elevation request 
    elevator.getElevationForLocations(positionalRequest, function(results, status) { 
     if (status == google.maps.ElevationStatus.OK) { 
     if (results[0]) { 
      for (var i=0; i< results.length; i++) { 
      document.getElementById('log').innerHTML += 
       '"' + places[i].name +'", elevation: ' + results[i].elevation.toFixed(2) + 'm<br>'; 
      } 
     } 
     } 
    }); 
    } 
    google.maps.event.addDomListener(window, 'load', getLocations); 
</script> 
<div id="log"></div>

這裏是您的輸入元件的例子。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
    function getLocations(locations) { 
    var elevator = new google.maps.ElevationService(); 
    var positionalRequest = { 
     'locations': locations 
    } 
    // Initiate the elevation request 
    elevator.getElevationForLocations(positionalRequest, function(results, status) { 
     if (status == google.maps.ElevationStatus.OK) { 
     if (results[0]) { 
      for (var i=0; i< results.length; i++) { 
      document.getElementById('log').innerHTML = 
       'elevation: ' + results[i].elevation.toFixed(2) + 'm<br>'; 
      } 
     } 
     } 
    }); 
    } 
    function myFunction() { 
    var locations = [ 
     new google.maps.LatLng(
     Number(document.getElementById('lat').value), 
     Number(document.getElementById('lng').value) 
    ) 
    ]; 
    getLocations(locations); 
    } 
</script> 
<div id="log"></div> 

<p>Lat:</p> 
<input id="lat" type="number"> 
<p>Long:</p> 
<input id="lng" type="number"> 
<button type="button" onclick="myFunction()">Submit</button>

來源

2015-01-12 10:53:10

謝謝Emmanuel。這個例子清楚地顯示瞭如何創建位置對象。希望很快我會學習Java。我只需要編輯答案，讓用戶在提交到提升服務之前手動輸入經緯度。使用你的輸入，我會嘗試創建完整的答案。感謝您的意見，我現在明白了很多。 –

O是，輸入元素。現在你們都有了。 –

靈光的輸入幫助了很多......這個答案/解決方案是好的......但可以大大提高......

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<h1>Enter Lat-Long to get Google Earth Level</h1> 
 
<p>Lat:</p> 
 
<input id="lat" type="number"> 
 
<p>Long:</p> 
 
<input id="long" type="number"> 
 
<button type="button" onclick="myFunction()">Submit</button> 
 

 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
 
<script> 
 

 
function myFunction() { 
 
    var elevator = new google.maps.ElevationService(); 
 
    var locations = []; 
 

 
    locations.push(new google.maps.LatLng(document.getElementById('lat').value, 
 
    document.getElementById('long').value)); 
 

 
    var positionalRequest = { 
 
     'locations': locations 
 
    } 
 

 
    elevator.getElevationForLocations(positionalRequest, function(results, status) { 
 
     if (status == google.maps.ElevationStatus.OK) { 
 
     if (results[0]) { 
 
      for (var i=0; i< results.length; i++) { 
 
      document.getElementById('log').innerHTML += 
 
       document.getElementById('lat').value + " , " + 
 
       document.getElementById('long').value + " , " + 
 
       results[i].elevation.toFixed(3) + '<br>'; 
 
      } 
 
     } 
 
     } 
 
    }); 
 
    } 
 
    
 
</script> 
 

 
<p>...</p> 
 
<div id="log"></div> 
 

 
</body> 
 
</html>

來源

2015-01-12 13:01:07

試試這個：（請注意粗線）

function myFunction() { 
var elevator = new google.maps.ElevationService(); 
var denali = new google.maps.LatLng(document.getElementById('lat').value , document.getElementById('long').value); 

elevator.getElevationForLocations({ 
    'locations':[denali] 
    }, function (results, status) { 
    if (status == google.maps.ElevationStatus.OK) { 

     // Retrieve the first result 
     if (results[0]) { 
      text = results[0].elevation; 
      **document.getElementById("level").innerHTML = text;** 
     } else { 
      alert('No results found'); 
     } 
    } 
    else { 
     alert('Elevation service failed due to: ' + status); 
    } 
});

}

來源

2016-03-23 17:22:17

谷歌地球的高程值

回答

相關問題