根据纬度和经度值谷歌地球高程

google earth elevation from latitude and longitude values

本文关键字：谷歌地球 高程 经度 纬度      更新时间：2023-09-26

以下网址提供了一个通过单击地图获取高程的很好的例子。

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

我想输入特定的纬度和经度值，而不是单击。

使用以下 HTML 和 javascript 会导致在输入 lat-long 时出现"未定义"。我错过了什么？

<!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>

下面是

一个包含硬编码位置的示例。

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

伊曼纽尔的投入帮助很大......这个答案/解决方案还可以...但可以大大改进...

<!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>

试试这个：（请保留粗体字）

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

}

相关文章：