Google標高サービスを使用して、次のような標高プロファイルを作成しようとしています:
https://google-developers.appspot.com/maps/documentation/javascript/examples/elevation-paths
Javascript は次のとおりです。
var elevator;
var map;
var chart;
var infowindow = new google.maps.InfoWindow();
var polyline;
// The following path marks a general path from Mt.
// Whitney, the highest point in the continental United
// States to Badwater, Death Vallet, the lowest point.
var whitney = new google.maps.LatLng(36.578581, -118.291994);
var lonepine = new google.maps.LatLng(36.606111, -118.062778);
var owenslake = new google.maps.LatLng(36.433269, -117.950916);
var beattyjunction = new google.maps.LatLng(36.588056, -116.943056);
var panamintsprings = new google.maps.LatLng(36.339722, -117.467778);
var badwater = new google.maps.LatLng(36.23998, -116.83171);
// Load the Visualization API and the columnchart package.
google.load("visualization", "1", {packages: ["columnchart"]});
function initialize() {
var mapOptions = {
zoom: 8,
center: lonepine,
mapTypeId: 'terrain'
}
map = new google.maps.Map(document.getElementById("map_canvas"), 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 = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];
// 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) {
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.4,
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: 640,
height: 200,
legend: 'none',
titleY: 'Elevation (m)'
});
}
}
KML ファイルがあります。その内容は次のとおりです。
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>test.kml</name>
<Style id="inline10">
<LineStyle>
<color>ff0000ff</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<fill>0</fill>
</PolyStyle>
</Style>
<Style id="inline00">
<LineStyle>
<color>ff0000ff</color>
<width>2</width>
</LineStyle>
<PolyStyle>
<fill>0</fill>
</PolyStyle>
</Style>
<StyleMap id="inline">
<Pair>
<key>normal</key>
<styleUrl>#inline00</styleUrl>
</Pair>
<Pair>
<key>highlight</key>
<styleUrl>#inline10</styleUrl>
</Pair>
</StyleMap>
<Placemark>
<name>4.6m run</name>
<styleUrl>#inline</styleUrl>
<LineString>
<tessellate>1</tessellate>
<coordinates>
-118.3701083851859,33.86613514741887,0 -118.3835891373556,33.86595745112309,0 -118.3837603618944,33.86620604860725,0 -118.3860197295395,33.865106678845,0 -118.3853630075581,33.86344608835453,0 -118.392210401906,33.86235962069966,0 -118.3930072160544,33.86482879105449,0 -118.3952920372758,33.86473719683653,0 -118.3955064755973,33.86544254118038,0 -118.3978346563853,33.87119781418026,0 -118.4006823491955,33.8746256060688,0 -118.395927369356,33.8729025811578,0 -118.3929679702478,33.87284041135064,0 -118.3912963149097,33.87280457074664,0 -118.3873145130551,33.86670833356382,0 -118.3845601044409,33.86794790820593,0 -118.3840431481755,33.86710880429249,0 -118.3704571100188,33.86705385780814,0
</coordinates>
</LineString>
</Placemark>
</Document>
</kml>
Google の開発者ブログの例では、特定の緯度と経度の値からパスを作成しています。これらの値は、kml ファイルの「座標」の下に既にあります。標高プロファイルを示すグラフを作成したいと思います。
また、「simplexml_load_file」を使用して kml ファイルを解析し、座標文字列を取得できました。
-118.3701083851859,33.86613514741887,0 -118.3835891373556,33.86595745112309,0 -118.3837603618944,33.86620604860725,0 -118.3860197295395,33.865106678845,0 -118.3853630075581,33.86344608835453,0 -118.392210401906,33.86235962069966,0 -118.3930072160544,33.86482879105449,0 -118.3952920372758,33.86473719683653,0 -118.3955064755973,33.86544254118038,0 -118.3978346563853,33.87119781418026,0 -118.4006823491955,33.8746256060688,0 -118.395927369356,33.8729025811578,0 -118.3929679702478,33.87284041135064,0 -118.3912963149097,33.87280457074664,0 -118.3873145130551,33.86670833356382,0 -118.3845601044409,33.86794790820593,0 -118.3840431481755,33.86710880429249,0 -118.3704571100188,33.86705385780814,0
自分が正しい道を進んでいるかどうかはわかりません。
これを交換する必要があると思います
var path = [ whitney, lonepine, owenslake, panamintsprings, beattyjunction, badwater];
KML の緯度、経度の値。
私はGoogle APIにかなり慣れていません。どんな助けでも大歓迎です。