2015-01-12 2 views
0

Следующий URL обеспечивают отличный пример для получения высоты, нажав на карте ..Google высота земли от широты и долготы значения

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

Я хочу, чтобы ввести конкретные значения широты и долготы вместо щелчка.

Использование следующих результатов HTML и javascript в "undefined" при вводе 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>

ответ

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

Спасибо Emmanuel. В этом примере четко показано, как создаются объекты местоположения. Надеюсь, скоро я изучу Java. Мне просто нужно отредактировать свой ответ, чтобы позволить пользователю вручную вводить длинные латы перед отправкой в ​​службу высот. Используя ваш вход, я попытаюсь создать полный ответ. Спасибо за ваш вклад, теперь я понимаю гораздо лучше. –

+0

O да, элементы ввода. Теперь у вас есть оба. –

1

вход Эммануэля помогло ... этот ответ/решение нормально ... но может быть значительно улучшена ...

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

0

Попробуйте это: (Пожалуйста, обратите внимание на жирную линию)

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

}