如何在地图上显示标记？ [英] How to show markers on map?

问题描述

我是Google Maps API的新手，并以沿着路径显示高程，我试图在每个样本图表的位置上弹出一个标记。

  function plotElevation（elevation，status）{
 var chartDiv = document.getElementById（'elevation_chart'）; 
 if（status！== google.maps.ElevationStatus.OK）{
 //在chartDiv中显示错误代码。 
 chartDiv.innerHTML ='无法显示高程：请求失败，因为'+状态; 
 return; 
} 
 
 //在elevation_chart DIV中创建一个新图表。 
 var chart = new google.visualization.ColumnChart（chartDiv）; 
 
 //提取填充图表的数据。 
 //因为样本是等距离的，所以这里的'Sample'
 //列与沿
 // X轴的距离具有双重任务。 
 var data = new google.visualization.DataTable（）; 
 data.addColumn（'string'，'Sample'）; 
 data.addColumn（'number'，'Elevation'）; （var i = 0; i< elevations.length; i ++）{
 data.addRow（[''，elevation [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 
}）; 
} 
 
 //使用其DIV内的数据绘制图表。 
 chart.draw（data，{
 height：170，
 legend：'none'，
 titleY：'Elevation（m）'
}）; 
} 
  

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

解决方案

在javascript控制台中报告错误： InvalidValueError：setMap：不是Map的一个实例;而不是StreetViewPanorama的一个实例。

您的map变量对于 initMap 是本地的，常规，最简单的解决方案是使其成为全球性的。

代码段：

  //加载Visualization API和columnchart package.google.load（'visualization'，'1'，{packages：['columnchart']}）; //全局映射variablevar map;函数initMap（ ）{//初始化全局地图变量map = new google.maps.Map（document.getElementById（'map'），{zoom：8，center：path [1]，mapTypeId：'terrain'}）; //创建一个ElevationService。 var elevator = new google.maps.ElevationService; //使用Visualization API和Elevation服务绘制路径。 displayPathElevation（path，elevator，map）;}函数displayPathElevation（path，elevator，map）{//显示高程路径的多段线。 new google.maps.Polyline（{path：path，strokeColor：'＃0000CC'，opacity：0.4，map：map}）; //使用这个数组创建一个PathElevationRequest对象。 //沿着这条路径请求256个样本。 //启动路径请求。 lift.getElevationAlongPath（{'path'：path，'samples'：256}，plotElevation）;} //接收一个ElevationResult对象数组，在地图上绘制路径//并绘制可视化API ColumnChart上的高程配置文件。函数plotElevation（高程，状态）{var chartDiv = document.getElementById（'elevation_chart'）; if（status！== google.maps.ElevationStatus.OK）{//在chartDiv中显示错误代码。 chartDiv.innerHTML ='无法显示标高：请求失败，因为'+状态;返回; } //在elevation_chart DIV中创建一个新图表。 var chart = new google.visualization.ColumnChart（chartDiv）; //提取填充图表的数据。 //因为样本是等距的，所以这里的'Sample'//列会沿着// X轴的距离执行双重任务。 var data = new google.visualization.DataTable（）; data.addColumn（'string'，'Sample'）; data.addColumn（'number'，'Elevation'）; for（var i = 0; i   
 < 100％;保证金：0; padding：0;}＃map {height：100％;}  

< script src =https://www.google.com/jsapi>< / script>< script src =https://maps.googleapis.com/maps/api/js?libraries =几何>< /脚本>< DIV> < div id =mapstyle =height：250px;>< / div> < div id =elevation_chart>< / div>< / div>

I'm new to Google Maps API and on the example of Showing elevation along a path, i am trying to pop up a marker on locations that every sample of the chart has been taken.

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)'
  });
}

Here is the part that i modified to pop-up markers but i couldnt find where the problem is. If someone can help me i would appreciate.

解决方案

There is an error reported in the javascript console: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama.

Your map variable is local to the initMap routine, simplest solution is to make it global.

code snippet:

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

这篇关于如何在地图上显示标记？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！