Создать профиль высоты от функции GeoJson

Question

У меня есть карта, которая содержит файл GeoJson с линиями, отображающий некоторые дорожки. Можно ли использовать службу Elevation Service API Карт Google для создания профилей высот для каждой функциональной строки файла 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(); 
} 

Я знаю, что я должен сделать запрос, как это: уаг pathRequest = { ' path ': источник latlng для создания пути ' samples ': 256 }

Так что, в принципе, я думаю, что GeoJson нужно добавить где-нибудь в i n pathRequest, но я не знаю, как и как создать другой график высоты для каждой функции в моем файле GeoJson.

fiddle of existing code

ОК, так что теперь я пытаюсь отобразить высоты диаграммы вместе с атрибутом Tip_drum в infowindows, когда я нажимаю данные. Я добавил этот код:

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()); 

Все работает нормально, пока я не закрою один из инфо-окон вручную. После этого информационные окна больше не появятся.

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);