如何在Google地图中组合地理位置和高程

时间:2015-10-06 16:27:08

标签: javascript geolocation elevation

我很难将Google地图中的地理位置和高程结合起来。 我需要提供当前位置的高程。似乎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变量和event.latLng具有不同的值。 pos生成[Object object]而event.latLng生成(lat值,long值)。虽然使用pos.lat产生纬度,然后与经度相同的pos.long。还在试图解决这个问题......

1 个答案:

答案 0 :(得分: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);
    }
  });
}

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