谷歌地图标记数组对象未显示答案

【问题标题】：Google Maps Marker Array Objects Not showing谷歌地图标记数组对象未显示
【发布时间】：2015-11-10 23:45:36
【问题描述】：

对于 Google 地图项目，我尝试将标记对象存储到数组中，然后通过 for 循环将它们放置在地图上。然而，这些标记似乎并没有在地图上显示出来。代码如下所列。

<script>
  function initialize(){

      var loc1 = {lat:24.256, lng:23.3536};
      var loc2 = {lat:63.456, lng:135.234};
      var loc3 = {lat:42.234, lng:153.234};
      var loc4 = {lat:38.737, lng:-150.181};
      var loc5 = {lat:4.816, lng:160.897};
      var loc6 = {lat:74.872, lng:-85.669};

      var mapProp = {
            center: new google.maps.LatLng(25.025922,121.543449),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
         };
      var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

      //code
      markerArray = [];
      //code
      addMarker(loc1, 'marker1');
      addMarker(loc2, 'marker2');
      addMarker(loc3, 'marker3');
      addMarker(loc4, 'marker4');
      addMarker(loc5, 'marker5');
      addMarker(loc6, 'marker6');

      showMarkers();
  }

  function addMarker(location, name){

    marker = new google.maps.Marker({
      position: location,
      map: map,
      title: name,
      icon:ship_icon
    });

    markerArray.push(marker);
  } 
   function showMarkers() {
           if (markerArray) {
              for (var i = 0; i < markerArray.length; i++) {
                 markerArray[i].setMap(map);
              };
           }
           else{
                alert("Carrier vessels marker cannot be loaded properly.");
           }
        }
</script>

Google 地图会加载，但标记不会。谁能弄清楚为什么会这样？谢谢。

【问题讨论】：

什么是ship_icon？

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

【解决方案1】：

addMarker() 函数中不存在您的 map 变量，它在 initialize() 函数中定义为局部变量。

在这些函数之外定义它，它将起作用：D

【讨论】：

我尝试将 addMarker() 和 showMarkers() 放在 initialize() 中，但似乎没有多大帮助...
@user3600725 这不是 overburn 所建议的。在initialize 函数之外添加var map;，使其成为全局变量。然后在 initialize 函数中设置 map 之前删除 var 关键字，因此您正在更新该全局变量，而不是函数的本地变量。

【解决方案2】：

要么

使您的 map 变量成为全局变量

或

将其传递给需要它的函数

working fiddle

代码 sn-p：

function initialize() {

  var loc1 = {
    lat: 24.256,
    lng: 23.3536
  };
  var loc2 = {
    lat: 63.456,
    lng: 135.234
  };
  var loc3 = {
    lat: 42.234,
    lng: 153.234
  };
  var loc4 = {
    lat: 38.737,
    lng: -150.181
  };
  var loc5 = {
    lat: 4.816,
    lng: 160.897
  };
  var loc6 = {
    lat: 74.872,
    lng: -85.669
  };

  var mapProp = {
    center: new google.maps.LatLng(25.025922, 121.543449),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

  //code
  markerArray = [];
  //code
  addMarker(loc1, 'marker1', map);
  addMarker(loc2, 'marker2', map);
  addMarker(loc3, 'marker3', map);
  addMarker(loc4, 'marker4', map);
  addMarker(loc5, 'marker5', map);
  addMarker(loc6, 'marker6', map);

  showMarkers(map);
}

function addMarker(location, name, map) {

  var marker = new google.maps.Marker({
    position: location,
    map: map,
    title: name
  });

  markerArray.push(marker);
}

function showMarkers(map) {
  var bounds = new google.maps.LatLngBounds();
  if (markerArray) {
    for (var i = 0; i < markerArray.length; i++) {
      bounds.extend(markerArray[i].getPosition())
      markerArray[i].setMap(map);
    };
    map.fitBounds(bounds);
  } else {
    alert("Carrier vessels marker cannot be loaded properly.");
  }
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="googleMap"></div>

【讨论】：