從GeoJson功能創建高程配置文件

Question

我有一個包含帶有線條的GeoJson文件的地圖，顯示一些路徑。是否可以使用Google Maps API Elevation Service爲GeoJson文件的每個要素線創建高程配置文件？我希望在單擊其中一行時顯示高程配置文件。

事情是這樣的例子：http://www.trailforks.com/region/la-bouilladisse/

我的代碼，到現在爲止，看起來是這樣的：

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

function initialize() { 
var options = { 
    center: new google.maps.LatLng(44.701991, 22.624884), 
    zoom: 12, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
}; 

map = new google.maps.Map(document.getElementById("map"), options); 

trasee = new google.maps.Data() 
trasee.loadGeoJson('http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.geojson') 
trasee.setMap(map) 

styling = (function(feature) { 
    var clasificare = feature.getProperty('Tip_drum'); 
    var culoare; 
    if (clasificare == ('Poteca')) 
     (culoare = 'brown') 
    else if (clasificare == ('Drum forestier')) 
     (culoare = 'green') 
    else if (clasificare == ('Drum comunal (neasfaltat)')) 
     (culoare = 'brown') 
    else if (clasificare == ('Drum judetean (neasfaltat)')) 
     (culoare = 'brown') 
    else if (clasificare == ('Drum comunal (asfaltat)')) 
     (culoare = 'gray') 
    else if (clasificare == ('Drum judetean (asfaltat)')) 
     (culoare = 'gray') 
    else 
     (culoare = 'black') 
    return ({ 
     strokeColor: culoare, 
     strokeWeight: 3 
    }) 
}) 

trasee.setStyle(styling) 

elevator = new google.maps.ElevationService(); 
} 

我知道我不得不作出這樣的要求： VAR pathRequest = { 「路徑'：用於創建路徑的latlng的源 '樣本'：256 }

所以基本上，我認爲GeoJson必須添加到某處n pathRequest，但我不知道如何以及如何爲GeoJson文件中的每個要素創建不同的高程圖。

fiddle of existing code

好了，現在我試着在信息窗口的Tip_drum屬性沿着顯示海拔圖表，當我點擊數據。我添加了以下代碼：

map.data.addListener('click', function (event) { 
    document.getElementById('info').innerHTML = event.feature.getProperty('Tip_drum') 
    var content = document.createElement('div') 
    var elevations = document.getElementById('elevation_chart') 
    var types = document.getElementById('info') 
    content.appendChild(elevations) 
    content.appendChild(types) 
    infowindow.setContent(content) 
    infowindow.setPosition(event.latLng) 
    infowindow.setMap(map) 
    if (event.feature.getGeometry().getType() === 'LineString') { 
     drawPath(event.feature.getGeometry().getArray()); 

一切工作正常，直到我手動關閉其中一個infowindows。之後，infowindows將不再出現。

Answer 1

1. 得到點擊功能的路徑（event.feature.getGeometry（）的getArray（））
2. 它傳遞給標高服務（如在elevations service documentation的例子）
3. 情節返回的數據在圖表上（如海拔服務文檔中的示例）
4. 從Google提升服務示例中刪除代碼，該示例根據數據層的多段線創建藍色折線。

（注意，有些上面沒有與您現有的代碼工作，我修改了它稍微相匹配的文檔中的工作實例）

working fiddle

var elevator; 
var map; 
var chart; 
var polyline; 

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

function initialize() { 
    var options = { 
     center: new google.maps.LatLng(44.701991, 22.624884), 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 

    map = new google.maps.Map(document.getElementById("map"), options); 

    trasee = new google.maps.Data(); 
    map.data.loadGeoJson('http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/trasee.geojson'); 

    // trasee.setMap(map); 

    styling = (function (feature) { 
     var clasificare = feature.getProperty('Tip_drum'); 
     var culoare; 
     if (clasificare == ('Poteca')) 
     (culoare = 'brown'); 
     else if (clasificare == ('Drum forestier')) 
     (culoare = 'green'); 
     else if (clasificare == ('Drum comunal (neasfaltat)')) 
     (culoare = 'brown'); 
     else if (clasificare == ('Drum judetean (neasfaltat)')) 
     (culoare = 'brown'); 
     else if (clasificare == ('Drum comunal (asfaltat)')) 
     (culoare = 'gray'); 
     else if (clasificare == ('Drum judetean (asfaltat)')) 
     (culoare = 'gray'); 
     else(culoare = 'black'); 
     return ({ 
      strokeColor: culoare, 
      strokeWeight: 3 
     }); 
    }); 

    map.data.setStyle(styling); 

    // Set mouseover event for each feature. 
    map.data.addListener('click', function (event) { 
     document.getElementById('info').innerHTML = event.feature.getProperty('Tip_drum'); 
     if (event.feature.getGeometry().getType() === 'LineString') { 
      drawPath(event.feature.getGeometry().getArray()); 

      // calculate the directions once both origin and destination are set 
      // calculate(); 
     } 
    }); 

    // When the user hovers, tempt them to click by outlining the letters. 
    // Call revertStyle() to remove all overrides. This will use the style rules 
    // defined in the function passed to setStyle() 
    map.data.addListener('mouseover', function(event) { 
    map.data.revertStyle(); 
     map.data.overrideStyle(event.feature, {strokeWeight: 8, strokeColor: 'blue'}); 
    }); 

    map.data.addListener('mouseout', function(event) { 
    map.data.revertStyle(); 
    }); 
    elevator = new google.maps.ElevationService(); 
    // Draw the path, using the Visualization API and the Elevation service. 
    // drawPath(); 
} 

function drawPath(path) { 

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

    // 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) { 
     return; 
    } 
    var 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); 
    } 

    // 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, { 
     height: 150, 
     legend: 'none', 
     titleY: 'Elevation (m)' 
    }); 
} 

google.maps.event.addDomListener(window, 'load', initialize);