关于 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
  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

然后将该索引传递给 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
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)'
    });
  }
}

概念证明小提琴

代码片段:
(请注意,图表在代码片段中实际上不起作用,存在安全错误: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.,但它确实在小提琴中起作用)

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
// 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">