Google地图中的Javascript for循环

Question

我创建了一个包含几个标记的地图，当用户点击标记时，它将打开一个弹出页面。当我有5个标记时它会正常工作但是现在，我必须实现~400个标记。所以我想为此使用for循环。但不知何故，标记不会出现在地图上。它不会给出任何错误。

这是我的代码：

let allMarkerOpts = [
    {
        finalLat: '35.6695585',
        finalLng: '139.7611172',
        iconUrl: 'hotelMarker.png',
        locationName: 'openGinza();'
    },

    {
        finalLat: '35.6961571',
        finalLng: '139.7547658',
        iconUrl: 'restaurantMarker.png',
        locationName: 'openKanda();'
    },

    {
        finalLat: '35.7058408',
        finalLng: '139.7407026',
        iconUrl: 'hotelMarker.png',
        locationName: 'openDome();'
    },

    {
        finalLat: '35.7012901',
        finalLng: '139.7368178',
        iconUrl: 'coffeehouseMarker.png',
        locationName: 'openKagurazaka();'
    },
];

    for ( var i; i < 5; i++ ) {
        (function(){
            let markerOptions = {
                map: map,
                position: {
                    lat: allMarkerOpts[i].finalLat,
                    lng: allMarkerOpts[i].finalLng
                }
            };

            markerOptions.icon = {
                url: "https://sitename.com/demo/img/destinations/markers/" + allMarkerOpts[i].iconUrl,
                scaledSize: new google.maps.Size(
                    52,
                    57),
                size: new google.maps.Size(
                    52,
                    57),
                anchor: new google.maps.Point(
                    26,
                    57)
            };

            let marker = new google.maps.Marker(markerOptions);



            google.maps.event.addListener(marker, 'click', (function(marker) {
            return function() {
                allMarkerOpts[i].locationName
            }
            })(marker));
        })();
    };

Answer 1

发布的代码有两个问题：

1. 你的循环没有有效的起始值：

 for ( var i; i < 5; i++ ) {

应该：

for ( var i=0; i < 5; i++ ) {

2. 您的纬度和经度值是字符串，而不是数字。我收到了javascript错误：InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number。一种选择是使用parseFloat来制作数字：

let markerOptions = {
    map: map,
    position: {
        lat: parseFloat(allMarkerOpts[i].finalLat),
        lng: parseFloat(allMarkerOpts[i].finalLng)
    }
};

proof of concept fiddle

代码段：

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var bounds = new google.maps.LatLngBounds();
  var infowindow = new google.maps.InfoWindow();
  for (var i = 0; i < allMarkerOpts.length; i++) {
    (function() {
      let markerOptions = {
        map: map,
        position: {
          lat: parseFloat(allMarkerOpts[i].finalLat),
          lng: parseFloat(allMarkerOpts[i].finalLng)
        }
      };
      let marker = new google.maps.Marker(markerOptions);
      bounds.extend(marker.getPosition());


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(allMarkerOpts[i].locationName);
          infowindow.open(map, marker);
        }
      })(marker, i));
    })();
  };
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
let allMarkerOpts = [{
    finalLat: '35.6695585',
    finalLng: '139.7611172',
    iconUrl: 'hotelMarker.png',
    locationName: 'openGinza();'
  },

  {
    finalLat: '35.6961571',
    finalLng: '139.7547658',
    iconUrl: 'restaurantMarker.png',
    locationName: 'openKanda();'
  },

  {
    finalLat: '35.7058408',
    finalLng: '139.7407026',
    iconUrl: 'hotelMarker.png',
    locationName: 'openDome();'
  },

  {
    finalLat: '35.7012901',
    finalLng: '139.7368178',
    iconUrl: 'coffeehouseMarker.png',
    locationName: 'openKagurazaka();'
  },
];

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

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