从标记和HUB创建高程图 [英] create elevation chart from markers and a HUB
本文介绍了从标记和HUB创建高程图的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这个Javascript将一个HUB标记与一个来自HUB的聚合物绘制到所有周围的标记上。我想绘制从HUB到用户点击标记的高程图。没有高程部分的脚本运行，高程部分不显示，不是地图而不是高程图。
< HTML>
< head>
< title> HUB< / title>
< script src =https://maps.googleapis.com/maps/api/js>< / script>
< / head>
< body>
< center>
< div id =mapstyle =width：900px; height：600px;>< / div>
< script type =text / javascript>
< div id =elevation_chartstyle =width：900px; height：600px;>< / div>
< 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：'标记4标题'，xinfo：'标记4 infowindow' ，lat：38.692667，lng：-90.665944}
];
函数initMap（）{
var map = new google.maps.Map（document.getElementById（'map'），
{
zoom：9，
center ：new google.maps.LatLng（locations [0]），
mapTypeId：google.maps.MapTypeId.TERRAIN
}）; // ----结束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
}）;
//创建周围标记和多边形到HUB
（var i = 1; i< locations.length; i ++）
{createMarker（i）; };
函数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
}）;
$ b $ // //结束createMarker（i）FUNCTION
marker.addListener（'click'，function（）{
infowindow.open（map，marker） ;
map.setCenter（marker.getPosition（））;
}）;
}; //结束initMap（）函数
函数drawPath（）{
//在elevation_chart DIV中创建一个新图表。
chart = new google.visualization.ColumnChart（document.getElementById（'elevation_chart'））;
var path = new Array;
path.push（位置[0]，位置[i]）;
//使用这个数组创建一个PathElevationRequest对象。
var pathRequest = {
'path'：path，
'samples'：256
}
//启动路径请求。
elevator.getElevationAlongPath（pathRequest，plotElevation）;
}
//获取一个ElevationResult对象数组，并在地图
//上绘制路径，并绘制可视化API ColumnChart上的高程配置文件。
函数plotElevation（results，status）{
if（status == google.maps.ElevationStatus.OK）{
elevation = results;
//从返回的结果
中提取海拔样本//并将它们存储在一个LatLng数组中。
var elevationPath = [];
for（var i = 0; i< results.length; i ++）{
elevationPath.push（elevations [i] .location）;
}
//提取填充图表的数据。
//因为样本是等距离的，所以这里的'Sample'
//列与沿
// X轴的距离具有双重任务。
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Sample'）;
data.addColumn（'number'，'Elevation'）;
for（var i = 0; i< results.length; i ++）{
data.addRow（[''，elevation [i] .elevation]）;
}
//使用其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）;
< / script>
< br />< / body>< / html>
解决方案
要获得图表的多个来源，您需要保持对各种多义线的引用，并将一些东西传递到绘图函数中，以指示绘制该图的哪条多段线。
一个选项将多段线推到与每个非HUB标记：
函数createMarker（i）{
var Xmarker = new google.maps。标记（{
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）;
}） ;
$ b var polyline = new google.maps.Polyline（{
path：[locations [0]，locations [i]]，
strokeColor：'＃cc0000'，
strokeWeight：'3'，
geodesic：true，
map：map
}）;
polylines [i] =折线;
} // end of createMarker（i）FUNCTION
然后通过索引到 drawPath 函数（从问题的答案之一修改：）：
函数drawPath（i）{
//在elevation_chart DIV中创建一个新图表。
chart = new google.visualization.ColumnChart（document.getElementById（'elevation-chart'））;
var path = polylines [i] .getPath（）。getArray（）;
//使用这个数组创建一个PathElevationRequest对象。
//向这条路径请求256个样本。
var pathRequest = {
'path'：path，
'samples'：256
}
//启动路径请求。
elevator.getElevationAlongPath（pathRequest，plotElevation）;
$ b函数plotElevation（结果，状态）{
if（status == google.maps.ElevationStatus.OK）{
标高=结果;
//从返回的结果
中提取海拔样本//并将它们存储在一个LatLng数组中。
var elevationPath = []; （var i = 0; i< elevations.length; i ++）{
elevationPath.push（elevation [i] .location）;
}
//提取填充图表的数据。
//因为样本是等距离的，所以这里的'Sample'
//列与沿
// X轴的距离具有双重任务。
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Sample'）;
data.addColumn（'number'，'Elevation'）;
for（var i = 0; i< results.length; i ++）{
data.addRow（[''，elevation [i] .elevation]）;
}
//使用其DIV内的数据绘制图表。
document.getElementById（'elevation-chart'）。style.display ='block';
chart.draw（data，{
width：960，
height：300，
legend：'none'，
titleY：'Elevation（m）'
}）;
}
}
概念证明小提琴
$ b
代码段：
（注意图表实际上并不在代码片段中，存在安全错误：未捕获的SecurityError：未能从'HTMLIFrameElement'中读取'contentDocument'属性：沙箱访问冲突：阻止了http://stacksnippets.net中的框架访问null框架，两个框架都是沙盒，并且缺少allow-same-origin标志。，但它在小提琴）
$ b
//加载Visualization API和columnchart package.google。 load（visualization，1，{packages：[columnchart]}）; var polylines = []; var elevator;函数initMap（） {var map = new google.maps.Map（document.getElementById（'map'），{zoom：9，center：new google.maps.LatLng（locations [0]），mapTypeId：google.maps.MapTypeId.TERRAIN} ）; // ----结束var map FUNCTION //创建一个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}）; （var i = 1; i< locations.length; i ++）{createMarker（i）; //创建环绕标记和多边形到HUB。 };函数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}）;多义线[i] =折线; } //结束createMarker（i）FUNCTION}; //结束initMap（）FUNCTIONfunction drawPath（i）{//在elevation_chart DIV中创建一个新图表。 chart = new google.visualization.ColumnChart（document.getElementById（'elevation-chart'））; var path = polylines [i] .getPath（）。getArray（）; //使用这个数组创建一个PathElevationRequest对象。 //沿着这条路径请求256个样本。 var pathRequest = {'path'：path，'samples'：256} //启动路径请求。 lift.getElevationAlongPath（pathRequest，plotElevation）;}函数plotElevation（结果，状态）{if（status == google.maps.ElevationStatus.OK）{elevation = results; //从返回的结果中提取高程样本//并将它们存储在LatLng的数组中。 var elevationPath = []; for（var i = 0; i
html，body，＃地图{height：100％;宽度：100％; margin：0px; < script src =https：//
This Javascript plots a HUB marker with a ployline from the HUB to all surrounding markers. I would like to plot an elevation chart from the HUB to the marker a user clicks. Without the elevation portion the script runs, with the elevation portion nothing display, not the map and not the elevation chart.
<html>
<head>
<title>HUB</title>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<center>
<div id="map" style="width: 900px; height: 600px;"></div>
<script type="text/javascript">
<div id="elevation_chart" style="width: 900px; height: 600px;"></div>
<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);
</script>
<br /></body></html>
解决方案
To have multiple sources for the chart, you need to keep references to the various polylines and pass something into the draw function to indicate which polyline to draw the chart for.
One option push the polylines onto an array associated with each of the "non-HUB" markers:
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
Then pass that index into the drawPath function (modified from one of the answers to the question: Create Elevation profile from polyline coordinate array):
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)'
});
}
}
code snippet:
(note that the chart doesn't actually work in the code snippet, there is a security error: 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., but it does work in the fiddle)
// 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
}];
html,
body,
#map {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&ext=.js"></script>
<div id="elevation-chart"></div>
<div id="map"></div>
这篇关于从标记和HUB创建高程图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
