javascript - Google map 标记数组对象未显示

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

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

<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 map 会加载,但标记不会加载。有人能弄清楚为什么会出现这种情况吗?谢谢。

最佳答案

您的 map 变量在addMarker()函数中不存在,它在initialize()函数中定义为本地变量。

在这些函数之外定义它,它将起作用:D

关于javascript - Google map 标记数组对象未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32065633/

相关文章:

javascript - 函数转化为函数调用javascript

javascript - mvc View 中的网格行选择

google-maps - 启用我的 Node.js Web 应用程序来保存谷歌地图图片

angular - Google Map 上带有 ionic 3 的多个标记

javascript - 停止在页面重新加载时显示确认框 - Javascript

javascript - 在 ng-repeat 上删除 AngularUI Accordion

api - 使用 Google Maps API 获取旅行时间数据

javascript - jQuery 各有 SetTimeout

javascript - 使用 Google Maps API v3 添加多个标记

javascript - 当用户在地理围栏之外时提醒一次