无法从对象数组中绘制标记数组答案

【问题标题】：Can't draw array of markers from array of objects无法从对象数组中绘制标记数组
【发布时间】：2019-06-15 04:29:57
【问题描述】：

给定对象数组中的数据，我正在尝试在地图上放置标记。使用 Google Maps API 文档中的示例代码，我可以放置一个标记，但是一旦我到达标记，我实际上想要放置什么都不会发生。我可以使用 console.log() 查看标记数据，但标记不会放置在地图上。

我得到的唯一错误是在 Google Maps API 之前调用脚本。否则其他一切似乎都很好（地图加载）。

所有文件都使用 file:// 运行。

我可能遗漏了一些非常明显的东西。几天前我刚刚开始学习 JavaScript，今天早上开始学习 Maps API。

构建地图的代码。

  var myLatLng = {lat: 36.602414870756, lng: -105.08904326937};

  var mapOptions = {
    zoom: 12,
    mapTypeId: 'hybrid',     //'satellite' with labels
    disableDoubleClickZoom: true,
    rotateControl: false,
    mapTypeControl: false,
    fullscreenControl: false,
    center: myLatLng
  };
  var globalMap = new google.maps.Map(document.getElementById('map'), mapOptions);

源数组。

var staffedCamps = [
...,
{
  id: 5,
  Name: "Black Mountain",
  lat: -105.0931424,
  long: 36.44229773,
  UTM_E: 491633.5115,
  UTM_N: 4033044.5622,
  Type: "Staff"
},
...,

构建标记数组的代码。

var markerData = new Array()
for (let newMark = 0; newMark < staffedCamps.length; newMark++) {
  var cMark = staffedCamps[newMark];
  markerData.push(new google.maps.Marker({
    position: {lat:cMark.lat, lng:cMark.long},
    map: globalMap,
    title: cMark.Name,
    label: cMark.Name
  }));
console.log(markerData)

HTML

<div id="map"></div>
<script defer src="main.js" onload="initMap()"></script>
<!-- Replace the value of the key parameter with your own API key. -->
<script defer src="https://maps.googleapis.com/maps/api/js?key=some_api_key&callback=initMap"></script>

【问题讨论】：

如果您深入到控制台中的一个标记，它是否设置了地图对象？这些营地离您的初始中心有多近（缩小会显示它们）？
代码看起来不错（尽管我们没有看到 main.js 中的内容或您的 initMap 函数）在我看来，您的数据中的纬度和经度与比较错误的方式相比到地图的中心。很确定-105的纬度不在地图上:)
@kevmc 我认为你对 lat long 错误的方式是正确的。今晚我回家时，我会试试看。

标签： javascript html google-maps google-maps-api-3

【解决方案1】：

我做了一个例子来放置几个标记，我使用这个new google.maps.Marker 来创建许多标记

var map;

function initialize() {
  var myLatlng = new google.maps.LatLng(41.38, 2.18);
  var myLatlng2 = new google.maps.LatLng(41.37, 2.17);

  var myOptions = {
    zoom: 13,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  var array = [{
      draggable: true,
      position: myLatlng,
      map: map,
      title: "Your location"
    },
    {
      draggable: true,
      position: myLatlng2,
      map: map,
      title: "Your location"
    }
  ]

  markerNow();

  function markerNow() {
    for (let i = 0; i < array.length; i++) {
      var marker = new google.maps.Marker(array[i]);
    }
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry&key=AIzaSyCK3ulYYM8GCwK-_HlZVNKvkgp-zvEebUM&"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

【讨论】：

谢谢x-rw。此代码有助于清理内容。 @kevmc 发现了这个问题。