Question

我正在尝试根据对象数组中的数据在地图上放置标记。使用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>

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

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

1 个答案: