javascript - 谷歌海拔 API 的位置始终为 NaN

Question

我不明白如何检索谷歌海拔结果的纬度和经度。

Google 像这样返回我 json:

{
   "results" : [
      {
         "elevation" : 1608.637939453125,
         "location" : {
            "lat" : 39.73915360,
            "lng" : -104.98470340
         },
         "resolution" : 4.771975994110107
      }
   ],
   "status" : "OK"
}

要访问elevation，我会执行elevations[0].location。 (elevations 是 JSON 结果)。

对于我访问我所做的纬度elevations[0].location.lat，问题是我得到function (){return a}我可以' t 检索纬度。

我想将结果存储在顶点中:

  var Vertex = function(x, y, z) {
      this.x = parseFloat(x);
      this.y = parseFloat(y);
      this.z = parseFloat(z);
  };

如果我这样做var vertex = new Vertex(elevations[0].location.lat,levations[0].location.lng,elevations[0].elevation); x 和 y 总是 NaN 为什么？

Answer 1

根据 documentation :

location Type: LatLng

The location of this elevation result.

Google Maps Javascript API v3 elevations service结果中的坐标是google.maps.LatLng对象。

要访问纬度和经度值，请调用适当的函数(.lat() 表示纬度，.lng() 表示经度):

var vertex = new Vertex(elevations[0].location.lat(), 
                        elevations[0].location.lng(), 
                        elevations[0].elevation);

fiddle

代码片段:

// Takes an array of ElevationResult objects, draws the path on the map
// and plots the elevation profile on a Visualization API ColumnChart.
function plotElevation(elevations, status) {
  for (var i = 0; i < elevations.length; i++) {
    var marker = new google.maps.Marker({
      position: elevations[i].location,
      map: map,
      icon: {
        url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
        size: new google.maps.Size(7, 7),
        anchor: new google.maps.Point(3.5, 3.5)
      },
      title: "" + elevations[i].elevation.toFixed(2) + ",lat:" + elevations[i].location.lat().toFixed(4) + ",lng:" + elevations[i].location.lng().toFixed(4)
    })
  }
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== 'OK') {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
      status;
    return;
  }
  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // 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 < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 150,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

// Load the Visualization API and the columnchart package.
google.load('visualization', '1', {
  packages: ['columnchart']
});
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

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

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    strokeOpacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, plotElevation);
}

// The following path marks a path from Mt. Whitney, the highest point in the
// continental United States to Badwater, Death Valley, the lowest point.
var path = [{
    lat: 36.579,
    lng: -118.292
  }, // Mt. Whitney
  {
    lat: 36.606,
    lng: -118.0638
  }, // Lone Pine
  {
    lat: 36.433,
    lng: -117.951
  }, // Owens Lake
  {
    lat: 36.588,
    lng: -116.943
  }, // Beatty Junction
  {
    lat: 36.34,
    lng: -117.468
  }, // Panama Mint Springs
  {
    lat: 36.24,
    lng: -116.832
  }
]; // Badwater, Death Valley

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
}

<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</div>
<script src="https://www.google.com/jsapi"></script>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>