javascript - 如何在 Google map 中结合地理位置和海拔

Question

我很难在 Google map 中结合地理位置和海拔。 我需要呈现当前位置的海拔高度。看来 pos 变量中的值不等于 event.latLng。

Google Maps Elevation

这是我尝试结合地理位置和海拔的代码

function initMap() {


var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    // disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    zoom: 20
  });
  var elevator = new google.maps.ElevationService;
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      displayLocationElevation(pos, elevator, infowindow);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

function displayLocationElevation(location, elevator, infowindow) {
  map.setCenter(location);
  Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === google.maps.ElevationStatus.OK) {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

更新: pos 变量和 event.latLng 似乎具有不同的值。 pos 生成 [Object object]，而 event.latLng 生成 (lat 值，long 值)。虽然使用 pos.lat 产生纬度，但与 pos.long 产生经度相同。仍在尝试解决这个问题...

Answer 1

好的，我明白了!代码如下:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    // disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    zoom: 20
  });
  var elevator = new google.maps.ElevationService;
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(pos);
      displayLocationElevation(map.getCenter(), elevator, infoWindow);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

function displayLocationElevation(location, elevator, infoWindow) {
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infoWindow.setPosition(location);
    if (status === google.maps.ElevationStatus.OK) {
      if (results[0]) {
        infoWindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters in ' + location);
      } else {
        infoWindow.setContent('No results found');
      }
    } else {
      infoWindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

希望对其他人有帮助! :)