Google map api v3 Services —— Elevation 在 Google map api v3 里面使用 海拔对象

这里介绍的是Google map api v3版本里面的Elevation。（如有转载请联系本人。）

由于Google 海拔应用程序接口里面提到说过在Google map api v3 版本里面出了可以使用 Google 海拔应用程序接口之外，还可以使用Elevation 对象。所以这里我们进行一下介绍，由于很多部分都是重复的，只是名称从“应用程序接口” 变成了 “对象”，所以这里可能有一部分不进行翻译。

===============================以下为翻译部分===================================

海拔服务提供了包括低谷和海洋（返回负值）之内的所有地球表面的所有地点的海拔信息。在您的精确地点请求中，我们返回的海拔信息并不一定是非常精确的，我们会返回一个附近地区的一个平均值。

海拔服务对象允许我们通过简单的查询获得地球表面的任何地点的海拔信息。除此之外，还允许您计算一个路线的等距的海拔变化，所以您可以请求沿着这个路径的一些抽样的海拔信息。在请求和返回的数据方面，Google 海拔服务和海拔服务对象是一样的。

海拔请求

此部分的信息基本和 Google 海拔应用程序接口部分介绍的一样，可以参考上一篇文章。
 

地点海拔请求

海拔服务请求对象的格式如下 

 

{
  locations[]: LatLng
}

locations（必须的参数）定义了可以返回海拔信息的地球表面的地点的位置信息。这个参数是一个经纬度数值对的数组。

在不超过规定的配额的前提下，您可以查询任意多的点的海拔信息。当然，多点的海拔信息查询的精确度会比单一位置的精确度低。

抽样的路径海拔请求

路径海拔请求对象的格式如下

 

{
  path[]: LatLng,
  samples: Number
}

 

 

接下来我们来介绍这两个参数：

 

path（必须的参数）定义了需要返回的海拔信息的路径。路径参数的定义是一系列的通过经纬度对象定义的定位度数值对。

samples（必须的参数）指定了需要返回的海拔信息的抽样点的个数。抽样的参数是给定路径上的平均分成的点。

海拔输出

此部分和Google 海拔应用程序接口类似，参考上一篇文章

 

接下来的部分是比较重要的例子（此处是笔者添加）

海拔例子

下面的代码是使用“地点海拔请求对象”通过点击Google地图上的一点发送一个海拔请求。

var elevator;
var map;
var infowindow = new google.maps.InfoWindow();
var denali = new google.maps.LatLng(63.3333333, -150.5);

function initialize() {
  var myOptions = {
    zoom: 8,
    center: denali,
    mapTypeId: 'terrain'
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Create an ElevationService
  elevator = new google.maps.ElevationService();

  // Add a listener for the click event and call getElevation on that location
  google.maps.event.addListener(map, 'click', getElevation);
}

function getElevation(event) {

  var locations = [];

  // Retrieve the clicked location and push it on the array
  var clickedLocation = event.latLng;
  locations.push(clickedLocation);

  // Create a LocationElevationRequest object using the array's one value
  var positionalRequest = {
    'locations': locations
  }

  // Initiate the location request
  elevator.getElevationForLocations(positionalRequest, function(results, status) {
    if (status == google.maps.ElevationStatus.OK) {

      // Retrieve the first result
      if (results[0]) {

        // Open an info window indicating the elevation at the clicked position
        infowindow.setContent("The elevation at this point 
is " + results[0].elevation + " meters.");
        infowindow.setPosition(clickedLocation);
        infowindow.open(map);
      } else {
        alert("No results found");
      }
    } else {
      alert("Elevation service failed due to: " + status);
    }
  });
}

查看具体例子

 

下面的例子是使用 Google 可视化应用程序接口构建（您需要加载这个API）了一个有多个点的折线。这是一个使用“路径海拔请求对象”的海拔请求。

var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;

// The following path marks a general path from Mt.
// Whitney, the highest point in the continental United
// States to Badwater, Death Vallet, the lowest point.
var whitney = new google.maps.LatLng(36.578581, -118.291994);
var lonepine = new google.maps.LatLng(36.606111, -118.062778);
var owenslake = new google.maps.LatLng(36.433269, -117.950916);
var beattyjunction = new google.maps.LatLng(36.588056, -116.943056);
var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
var badwater = new google.maps.LatLng(36.23998, -116.83171);
  
// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {packages: ["columnchart"]});

function initialize() {
  var myOptions = {
    zoom: 8,
    center: lonepine,
    mapTypeId: 'terrain'
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  // Create an ElevationService.
  elevator = new google.maps.ElevationService();

  // Draw the path, using the Visualization API and the Elevation service.
  drawPath();
}

function drawPath() {

  // Create a new chart in the elevation_chart DIV.
  chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));

  var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  var pathRequest = {
    'path': path,
    'samples': 256
  }

  // Initiate the path request.
  elevator.getElevationAlongPath(pathRequest, plotElevation);
}

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(results, status) {
  if (status == google.maps.ElevationStatus.OK) {
    elevations = results;

    // Extract the elevation samples from the returned results
    // and store them in an array of LatLngs.
    var elevationPath = [];
    for (var i = 0; i < results.length; i++) {
      elevationPath.push(elevations[i].location);
    }

    // Display a polyline of the elevation path.
    var pathOptions = {
      path: elevationPath,
      strokeColor: '#0000CC',
      opacity: 0.4,
      map: map
    }
    polyline = new google.maps.Polyline(pathOptions);

    // Extract the data from which to populate the chart.
    // Because the samples are equidistant, the 'Sample'
    // column here does double duty as distance along the
    // X axis.
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < results.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    // Draw the chart using the data within its DIV.
    document.getElementById('elevation_chart').style.display = 'block';
    chart.draw(data, {
      width: 640,
      height: 200,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }
}

查看具体例子