添加事件偵聽到JavaScript數組

Question

我試圖把谷歌地圖我的標誌，並添加信息窗口中的每個單獨的標記。我得到無法在該行讀的不確定屬性「姓名」後，我點擊標記之一：

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

此作品（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); 
} 

proof of concept fiddle

代碼片段：

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>

Answer 2

試試這個嗎？

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); 

    }