如何结合地理位置和海拔在谷歌地图

How to combine Geolocation and Elevation in Google Maps

本文关键字:谷歌地图 地理位置 何结合 结合      更新时间:2023-09-26

我很难将谷歌地图中的地理位置和海拔结合起来。我需要显示当前位置的海拔高度。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);
    }
  });
}

UPDATE:似乎pos变量和事件。latLng有不同的值。pos生成[Object Object] while事件。latLng生产(后期价值,长期价值)。虽然使用pos.lat生成纬度,但与使用pos.long生成经度相同。

我知道了!下面是代码:

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

希望对别人有所帮助!:)