问题描述
我使用坐标数组创建了一条多段线,其代码来自
I have created a polyline using a coordinate array with code adapted fromhttps://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-simple
虽然第一个(也许最差)的方法,使线只是一个巨大的经济/经济援助点列表。我仍然在学习编程技巧,我很抱歉。我是一名地理学家,不是程序员!
Although the first (and probably worst) method to make the line was just a huge list of lat/lng points. Still learning the programming tricks, I apologize. Im a geographer not a programmer!
我想从该行获取高程并创建高程剖面图。
我新来JS,不知道如何调试什么不工作。我似乎无法用折线中的坐标来填充路径数组。
I want to get the elevation from that line and create an elevation profile graph.Im new to JS and not sure how to debug whats not working. I cant seem to populate the path array with the coordinates from the polyline.
它目前设置为将bikeCourseCoordinates推到一个新的数组中,然后将其用作路径。我尝试了使用bikeCourseCoordinates数组作为'路径',但这也没有效果。
Its currently set to push the bikeCourseCoordinates to a new array that will then be used as a path. I tried it just using the bikeCourseCoordinates array as the 'path' but that didnt work either.
在线(但不是工作版本)在这里:
Online (but not working version) here:http://geography.uoregon.edu:50000/bentesting/map_try3.html
function drawPath() {
// Create a new chart in the elevation_chart DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation_chart'));
var path = new Array;
path.push(bikeCourseCoordinates);
// Create a PathElevationRequest object using this array.
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) {
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, {
width: 640,
height: 200,
legend: 'none',
titleY: 'Elevation (m)'
});
}
}
推荐答案
你试图在该页面上重现第三个例子?
Are you trying to reproduce the third exemple on that page ? https://developers.google.com/maps/customize
如果是的话,我已经做了,但没有图表超过效果
If yes i have done it but without the graph over effects
这里是我的代码
这在你的脑袋里
script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"
script type="text/javascript" src="https://www.google.com/jsapi"
script src="https://www.google.com/uds/?file=visualization&v=1&packages=columnchart" type="text/javascript"
,并且在body标签之前的页脚中
and this in the footer just before body tag
var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;
var mapCenter = new google.maps.LatLng(-21.745585792425,165.91141052497);
// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {packages: ["columnchart"]});
function initialize() {
var mapOptions = {
center: mapCenter,
zoom: 13,
mapTypeId: 'terrain'
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// Create an ElevationService.
elevator = new google.maps.ElevationService();
// Draw the path, using the Visualization API and the Elevation service.
drawPath();
}
function drawPath() {
// Create a new chart in the elevation_chart DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));
var path = bikeCourseCoordinates;
// 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);
}
function plotElevation(results, status) {
if (status == google.maps.ElevationStatus.OK) {
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);
}
// Display a polyline of the elevation path.
var pathOptions = {
path: elevationPath,
strokeColor: '#0000CC',
opacity: 0.9,
map: map
}
polyline = new google.maps.Polyline(pathOptions);
// 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, {
width: 960,
height: 300,
legend: 'none',
titleY: 'Elevation (m)'
});
}
}
initialize();
这篇关于从多段线坐标数组创建高程剖面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!