关于 javascript：从标记和 HUB 创建高程图

create elevation chart from markers and a HUB

这个 Javascript 绘制一个 HUB 标记，它带有一条从 HUB 到所有周围标记的折线。我想绘制从 HUB 到用户单击的标记的海拔图。没有高程部分，脚本运行，高程部分不显示，不显示地图，也不显示高程图。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<html>
<head>
HUB
<script src="https://maps.googleapis.com/maps/api/js">
</head>
<body>
<center>

<script type="text/javascript">

<script type="text/javascript">
var locations = [
{xtitle: 'Hub title', xinfo: 'Hub infowindow', lat: 38.624365, lng: -90.18503 },
{xtitle: 'Marker 1 title', xinfo: 'Marker 1 infowindow', lat: 38.920056, lng: -90.105111 },
{xtitle: 'Marker 2 title', xinfo: 'Marker 2 infowindow', lat: 38.688667, lng: -89.560639 },
{xtitle: 'Marker 3 title', xinfo: 'Marker 3 infowindow', lat: 38.416944, lng: -90.433028 },
{xtitle: 'Marker 4 title', xinfo: 'Marker 4 infowindow', lat: 38.692667, lng: -90.665944 }
];
function initMap() {
var map = new google.maps.Map(document.getElementById('map'),
{
zoom: 9,
center: new google.maps.LatLng(locations[0]),
mapTypeId: google.maps.MapTypeId.TERRAIN
}); // ---- END OF var map FUNCTION

// CREATE HUB MARKER & HUB INFOWINDOW
var marker = new google.maps.Marker({
position: locations[0],
title: locations[0].xtitle,
map: map
});

var infowindow = new google.maps.InfoWindow({
content: locations[0].xinfo
});

// CREATE SURROUNDING MARKERS AND POLYLINE TO HUB
for (var i = 1; i < locations.length; i++)
{ createMarker(i); };

function createMarker(i) {
var Xmarker = new google.maps.Marker({
map: map,
position: locations[i],
title: locations[i].xtitle,
});
var infowindow = new google.maps.InfoWindow({
content: locations[i].xinfo
});
google.maps.event.addListener(Xmarker, 'click', function() {
infowindow.open(map,Xmarker);
});

new google.maps.Polyline({
path: [ locations[0], locations[i] ],
strokeColor: '#cc0000',
strokeWeight: '3',
geodesic: true,
map: map
});

} // END OF createMarker(i) FUNCTION

marker.addListener('click', function() {
infowindow.open(map, marker);
map.setCenter(marker.getPosition());
});

}; // END OF initMap() FUNCTION

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(locations[0], locations[i]);

// 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)'
});
}
}
google.maps.event.addDomListener(window, 'load', initMap);

<br /></body></html>

相关讨论

要为图表提供多个来源，您需要保留对各种折线的引用，并将某些内容传递给 draw 函数以指示要为哪条折线绘制图表。

一个选项将折线推送到与每个"非 HUB"标记关联的数组上：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

然后将该索引传递给 drawPath 函数(根据问题的答案之一修改：从折线坐标数组创建高程剖面)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

概念证明小提琴

代码片段：
(请注意，图表在代码片段中实际上不起作用，存在安全错误：Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Sandbox access violation: Blocked a frame at"http://stacksnippets.net" from accessing a frame at"null". Both frames are sandboxed and lack the"allow-same-origin" flag.，但它确实在小提琴中起作用)

// Load the Visualization API and the columnchart package.
google.load("visualization","1", {
packages: ["columnchart"]
});

var polylines = [];
var elevator;

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
center: new google.maps.LatLng(locations[0]),
mapTypeId: google.maps.MapTypeId.TERRAIN
}); // ---- END OF var map FUNCTION

// Create an ElevationService.
elevator = new google.maps.ElevationService();

// CREATE HUB MARKER & HUB INFOWINDOW
var marker = new google.maps.Marker({
position: locations[0],
title: locations[0].xtitle,
map: map
});

var infowindow = new google.maps.InfoWindow({
content: locations[0].xinfo
});

// CREATE SURROUNDING MARKERS AND POLYLINE TO HUB
for (var i = 1; i < locations.length; i++) {
createMarker(i);
};

function createMarker(i) {
var Xmarker = new google.maps.Marker({
map: map,
position: locations[i],
title: locations[i].xtitle,
});
var infowindow = new google.maps.InfoWindow({
content: locations[i].xinfo
});
google.maps.event.addListener(Xmarker, 'click', function() {
infowindow.open(map, Xmarker);
drawPath(i);
});

var polyline = new google.maps.Polyline({
path: [locations[0], locations[i]],
strokeColor: '#cc0000',
strokeWeight: '3',
geodesic: true,
map: map
});
polylines[i] = polyline;

} // END OF createMarker(i) FUNCTION

}; // END OF initMap() FUNCTION

function drawPath(i) {

// Create a new chart in the elevation_chart DIV.
chart = new google.visualization.ColumnChart(document.getElementById('elevation-chart'));

var path = polylines[i].getPath().getArray();

// 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 < elevations.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: 960,
height: 300,
legend: 'none',
titleY: 'Elevation (m)'
});
}
}

google.maps.event.addDomListener(window, 'load', initMap);

var locations = [{
xtitle: 'Hub title',
xinfo: 'Hub infowindow',
lat: 38.624365,
lng: -90.18503
}, {
xtitle: 'Marker 1 title',
xinfo: 'Marker 1 infowindow',
lat: 38.920056,
lng: -90.105111
}, {
xtitle: 'Marker 2 title',
xinfo: 'Marker 2 infowindow',
lat: 38.688667,
lng: -89.560639
}, {
xtitle: 'Marker 3 title',
xinfo: 'Marker 3 infowindow',
lat: 38.416944,
lng: -90.433028
}, {
xtitle: 'Marker 4 title',
xinfo: 'Marker 4 infowindow',
lat: 38.692667,
lng: -90.665944
}];

1
2
3
4
5
6
7
8

html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

1 2	<script src="https://www.google.com/jsapi"> <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js">