javascript - 如何在 map 上显示标记？

Question

我是 Google Maps API 的新手，以 Showing elevation along a path 为例，我试图在图表的每个样本已采集的位置上弹出一个标记。

function plotElevation(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== google.maps.ElevationStatus.OK) {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' + status;
    return;
  }

  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // 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 < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
    var marker = new google.maps.Marker({
      position: {lat: elevations[i].location.lat(), lng: elevations[i].location.lng()},
      draggable: false,
      map: map,
      flat: true
    });
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 170,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}

这是我修改为弹出标记的部分，但我找不到问题出在哪里。如果有人可以帮助我，我将不胜感激。

Answer 1

JavaScript 控制台报告错误:InvalidValueError: setMap: not an instance of Map;而不是 StreetViewPanorama 的实例。

您的 map 变量是 initMap 例程的本地变量，最简单的解决方案是将其设为全局变量。

代码片段:

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

// global map variable
var map;

function initMap() {
  // initialize global map variable
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: path[1],
    mapTypeId: 'terrain'
  });

  // Create an ElevationService.
  var elevator = new google.maps.ElevationService;

  // Draw the path, using the Visualization API and the Elevation service.
  displayPathElevation(path, elevator, map);
}

function displayPathElevation(path, elevator, map) {
  // Display a polyline of the elevation path.
  new google.maps.Polyline({
    path: path,
    strokeColor: '#0000CC',
    opacity: 0.4,
    map: map
  });

  // Create a PathElevationRequest object using this array.
  // Ask for 256 samples along that path.
  // Initiate the path request.
  elevator.getElevationAlongPath({
    'path': path,
    'samples': 256
  }, 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(elevations, status) {
  var chartDiv = document.getElementById('elevation_chart');
  if (status !== google.maps.ElevationStatus.OK) {
    // Show the error code inside the chartDiv.
    chartDiv.innerHTML = 'Cannot show elevation: request failed because ' + status;
    return;
  }

  // Create a new chart in the elevation_chart DIV.
  var chart = new google.visualization.ColumnChart(chartDiv);

  // 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 < elevations.length; i++) {
    data.addRow(['', elevations[i].elevation]);
    var marker = new google.maps.Marker({
      position: {
        lat: elevations[i].location.lat(),
        lng: elevations[i].location.lng()
      },
      draggable: false,
      map: map,
      flat: true
    });
  }

  // Draw the chart using the data within its DIV.
  chart.draw(data, {
    height: 170,
    legend: 'none',
    titleY: 'Elevation (m)'
  });
}
google.maps.event.addDomListener(window, "load", initMap);
// The following path marks a path from Mt. Whitney, the highest point in the
// continental United States to Badwater, Death Valley, the lowest point.
var path = [{
    lat: 36.579,
    lng: -118.292
  }, // Mt. Whitney
  {
    lat: 36.606,
    lng: -118.0638
  }, // Lone Pine
  {
    lat: 36.433,
    lng: -117.951
  }, // Owens Lake
  {
    lat: 36.588,
    lng: -116.943
  }, // Beatty Junction
  {
    lat: 36.34,
    lng: -117.468
  }, // Panama Mint Springs
  {
    lat: 36.24,
    lng: -116.832
  }
]; // Badwater, Death Valley

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

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div>
  <div id="map" style="height:250px;"></div>
  <div id="elevation_chart"></div>
</div>