将eventlistener添加到javascript数组

Question

我正在尝试将标记放在Google地图上，并向每个标记添加一个InfoWindow。 我单击以下标记之一后， 无法读取未定义的属性“名称” ：

markers[i].name.open(map, marker);

这是完整的脚本：

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    // zoom in on current location if available (not done yet...)
    center: new google.maps.LatLng(5,5)
  });

  var markers = [
    // put all markers in a markers array
    @foreach ($markers as $marker)
      new google.maps.Marker({
        position: { lat: {{$marker->x}}, lng: {{$marker->y}} },
        // infowindow for each marker with its name
        name: new google.maps.InfoWindow({
          content: "{{$marker->name}}"
        })
      }), 
    @endforeach
  ];

  for (var i = 0; i < markers.length; i++) { 
    // add eventlistener for the infowindow we added earlier
    google.maps.event.addListener(markers[i], 'click', function() {
      markers[i].name.open(map, marker);
    });
    // add marker to map
    markers[i].setMap(map);
  }
}

我将Laravel 5.1与Blade模板引擎一起使用。

Answer 1

尝试这个 ？

 for (var i = 0; i < markers.length; i++) {
            // add eventlistener for the infowindow we added earlier
            (function(i) {
                google.maps.event.addListener(markers[i], 'click', function() {
                    //console.log(markers[i])
                    markers[i].name.open(map, markers[i]);
                });
                // add marker to map
                markers[i].setMap(map);
            })(i);

  }

Answer 2

这工作（ this在点击监听器是指google.maps.Marker所单击）：

for (var i = 0; i < markers.length; i++) { 
  // add eventlistener for the infowindow we added earlier
  google.maps.event.addListener(markers[i], 'click', function() {
    this.name.open(map, this);
  });
  // add marker to map
  markers[i].setMap(map);
}

概念证明

代码段：

 function initMap() { var map = new google.maps.Map(document.getElementById("map"), { zoom: 3, // zoom in on current location if available (not done yet...) center: new google.maps.LatLng(5, 5) }); var markers = [ // put all markers in a markers array // @foreach ($markers as $marker) // New York, NY, USA (40.7127837, -74.00594130000002) new google.maps.Marker({ position: { lat: 40.7127837, lng: -74.0059413 }, // infowindow for each marker with its name name: new google.maps.InfoWindow({ content: "New York, NY, USA" }) }), // Newark, NJ, USA (40.735657, -74.1723667) new google.maps.Marker({ position: { lat: 40.735657, lng: -74.1723667 }, // infowindow for each marker with its name name: new google.maps.InfoWindow({ content: "Newark, NJ, USA" }) }), // Baltimore, MD, USA (39.2903848, -76.61218930000001) new google.maps.Marker({ position: { lat: 39.2903848, lng: -76.6121893 }, // infowindow for each marker with its name name: new google.maps.InfoWindow({ content: "Baltimore, MD, USA" }) }), // @endforeach ]; var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { // add eventlistener for the infowindow we added earlier google.maps.event.addListener(markers[i], 'click', function() { this.name.open(map, this); }); // add marker to map markers[i].setMap(map); bounds.extend(markers[i].getPosition()); } map.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", initMap); 

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

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