Question

这个Javascript绘制了一个带有ployline的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>

Answer 1

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

一个选项将折线推到与每个＆＃34;非HUB＆＃34;相关联的阵列上。标记物：

 display_errors(E_ALL);

if(isset($_POST['muldelete'])) {
$mul = implode(',',$_POST['checkdelete']);

$sql = "DELETE FROM cmarkers WHERE id IN(" . $mul.")";
$result = mysqli_query($db, $sql);
redirect_to("elerts.php");
}

然后将该索引传递到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函数（根据问题的答案之一修改：Create Elevation profile from polyline coordinate array）：

drawPath

proof of concept fiddle

代码段 （请注意，图表在代码段中实际上并不起作用，存在安全错误：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)' }); } }，但它确实可以在小提琴中运行）

＆＃13;

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.

＆＃13;

// 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
}];

＆＃13;

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

＆＃13;

从标记和HUB创建高程图

1 个答案: