谷歌地图Api-如何在海拔图中绘制线路长度

Google Maps Api - how to plot line length in elevation graph

本文关键字：绘制 线路 Api- 谷歌地图      更新时间：2023-09-26

我有一张地图，它在信息窗口中显示一些线的高程图。有什么方法可以显示沿图形横轴的线长度吗？

以下是用于创建高程图的代码：

//Loading the GeoJSON file containing the lines
lines = new google.maps.Data();
lines.loadGeoJson('http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/lines.geojson');
lines.setMap(map)

//Setting the infowindow content
infowindow = new google.maps.InfoWindow(
{content: '<div class = "corp" style="width: 300px; height: 200px">' + '<div id = "elevation_chart">' + '</div>' + '</div>'}
)
//Displaying the infowindow when a line is clicked
lines.addListener('click', function (event) {
    infowindow.setPosition(event.latLng)
    infowindow.setMap(map)
    drawPath(event.feature.getGeometry().getArray());
});

//Invoking the elevation service
elevator = new google.maps.ElevationService()

//Defining the path for which to plot the elevation
function drawPath(path, type) {
chart = new google.visualization.AreaChart(document.getElementById('elevation_chart'));
var pathRequest = {
    'path': path,
    'samples': 256
};
elevator.getElevationAlongPath(pathRequest, plotElevation);
}

function plotElevation(results, status) {
if (status != google.maps.ElevationStatus.OK) {
    return;
}
var elevations = results;
var elevationPath = [];
for (var i = 0; i < results.length; i++) {
    elevationPath.push(elevations[i].location);
}
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]);
}

document.getElementById('elevation_chart').style.display = 'block';
chart.draw(data, {
    legend: 'none',
    titleY: 'Elevation (m)'
});
}

此外，我的一个应用程序：http://jsfiddle.net/p15o1kkm/1/

试试这个：

//Initializing the map
function initialize() {
    var options = {
        center: new google.maps.LatLng(44.740337, 22.476279),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
    };
    map = new google.maps.Map(document.getElementById("map"), options);
    //Loading the GeoJSON file containing the lines
    lines = new google.maps.Data();
    lines.loadGeoJson('http://googledrive.com/host/0B55_4P6vMjhITEU4Ym9iVG8yZUU/lines.geojson');
    lines.setMap(map)
    //Setting the infowindow content
    infowindow = new google.maps.InfoWindow({
        content: '<div class = "corp" style="width: 300px; height: 200px">' + '<div id = "elevation_chart">' + '</div>' + '</div>'
    })
    //Displaying the infowindow when a line is clicked
    lines.addListener('click', function(event) {
        infowindow.setPosition(event.latLng)
        infowindow.setOptions({
            pixelOffset: new google.maps.Size(10, -15)
        })
        infowindow.setMap(map);
        drawPath(event.feature.getGeometry().getArray());
    });
    //Invoking the elevation service
    elevator = new google.maps.ElevationService()
}

//Defining the path for which to plot the elevation
function drawPath(path, type) {
    chart = new google.visualization.AreaChart(document.getElementById('elevation_chart'));
    var pathRequest = {
        'path': path,
        'samples': 256
    };
    var length = google.maps.geometry.spherical.computeLength(path);
    elevator.getElevationAlongPath(pathRequest, function(results, status) {
        plotElevation(results, status, length);
    });
}

function plotElevation(results, status, length) {
    if (status != google.maps.ElevationStatus.OK) {
        return;
    }
    var elevations = results;
    var elevationPath = [];
    for (var i = 0; i < results.length; i++) {
        elevationPath.push(elevations[i].location);
    }
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Sample');
    data.addColumn('number', 'Altitudine');
    for (var i = 0; i < results.length; i++) {
        data.addRow(['', elevations[i].elevation]);
    }
    //Setarea stilului graficelor
    document.getElementById('elevation_chart').style.display = 'block';
    chart.draw(data, {
        legend: 'none',
        titleY: 'Elevation (m)',
        titleX: length
    });
}
google.maps.event.addDomListener(window, 'load', initialize);

重要的部分显然是

var length = google.maps.geometry.spherical.computeLength(path);

以及我们通过匿名回调函数调用plotElevation函数的方式，因此我们还可以添加路径长度以及结果和状态参数。

相关文章：