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 = { ＆＃39; path＆＃39;：用于创建路径的latlng源＆＃39;样本＆＃39;：256 }

基本上，我认为GeoJson必须添加到pathRequest中的某个地方，但我不知道如何以及如何为我的GeoJson文件中的每个功能创建不同的高程图。

fiddle of existing code

好的，现在我尝试在单击数据时在infowindows中显示高程图和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

从点击的功能获取路径（event.feature.getGeometry（）。getArray（））
将其传递给高程服务（如elevations service documentation）
在图表上绘制返回的数据（如高程服务文档中的示例）
从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);

从GeoJson功能创建高程配置文件

1 个答案: