0

这个 Javascript 绘制一个 HUB 标记，它带有一条从 HUB 到所有周围标记的折线。我想绘制从 HUB 到用户单击的标记的海拔图。如果没有高程部分，脚本将运行，高程部分不显示任何内容，地图和高程图表都不会显示。

<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>
4

1 回答 1

0

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

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

  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函数（根据问题的答案之一修改：从折线坐标数组创建高程剖面）：

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.，但它确实在小提琴中起作用）

// 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>

于 2015-12-20T01:59:33.957 回答