【问题标题】:How to get google map elevation profile graph from a path, (on hover display information)如何从路径获取谷歌地图海拔剖面图,(悬停显示信息)
【发布时间】:2019-01-06 12:34:17
【问题描述】:

我正在使用谷歌地图“沿路径的海拔高度”显示自定义路径,我在地图上绘制了图形和路径,

我怎样才能让图表可以悬停,以便在同一位置显示高程信息。

这是一个指向谷歌地图的链接,其中包含我想要的图表 this is what i have now

  google.load('visualization', '1', {packages: ['columnchart']});

  function initMap() {
    var path = [
        {lat: 36.579, lng: -118.292},  
        {lat: 36.606, lng: -118.0638},  
        {lat: 36.433, lng: -117.951}, 
        {lat: 36.588, lng: -116.943},  
        {lat: 36.34, lng: -117.468},  
        {lat: 36.24, lng: -116.832}];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: path[1]
    });

    var elevator = new google.maps.ElevationService;

    displayPathElevation(path, elevator, map);
  }

  function displayPathElevation(path, elevator, map) {
    new google.maps.Polyline({
      path: path,
      strokeColor: '#0000CC',
      strokeOpacity: 0.4,
      map: map
    });

    elevator.getElevationAlongPath({
      'path': path,
      'samples': 200
    }, plotElevation);
  }

  function plotElevation(elevations, status) {
    var chartDiv = document.getElementById('elevation_chart');
    if (status !== 'OK') {
      chartDiv.innerHTML = 'Cannot show elevation: request failed because ' +
          status;
      return;
    }
    var chart = new google.visualization.AreaChart(chartDiv);

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'tooltip');
    data.addColumn('number', 'Elevation');
    for (var i = 0; i < elevations.length; i++) {
      data.addRow(['', elevations[i].elevation]);
    }

    chart.draw(data, {
      height: 150,
      legend: 'none',
      titleY: 'Elevation (m)'
    });
  }

【问题讨论】:

    标签: jquery google-maps elevation google-elevation-api map-api


    【解决方案1】:

    至少你可以用

    在图中看到海拔
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'sample');
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-01-09
      • 2018-03-28
      • 1970-01-01
      • 1970-01-01
      • 2016-12-06
      • 1970-01-01
      • 2021-08-18
      • 1970-01-01
      相关资源
      最近更新 更多