Question

以下网址提供了一个通过点击地图获得高程的绝佳示例..

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

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

在输入lat-long时，使用以下HTML和javascript会导致“undefined”。我错过了什么？

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

Answer 1

以下是一个带有硬编码位置的示例。

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

Answer 2

Emmanuel的投入帮了很多...这个答案/解决方案还可以......但是可以大大改进......

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

Answer 3

试试这个：（请用粗线表示支付）

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

}

来自纬度和经度值的Google地球高程

3 个答案: