谷歌地圖InfoWindow打開加載，而不是onclick

Question

我一直在努力這個永遠，我是如此接近！第一次使用CustomMarker和MarkerCluster。

以下JavaScript完美工作，除了infowindows全部打開，頁面加載時。我希望他們打開點擊標記。

<script> 
function initMap() { 
    var newYork = {lat: 40.7127837, lng: -74.00594130000002}; 
    var map = new google.maps.Map(document.getElementById("user-matches-map"), { 
     zoom: 12, 
     center: new google.maps.LatLng(newYork), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
    var markers = [] 
    var matches = $.getJSON('get_json_matches', function(matches){ 
     var matches = matches 
     for(i=0; i < matches.length; i++) { 
      //console.log(matches[i]) 
      var firstName = matches[i][1] 
      var lat = matches[i][4] 
      var lng = matches[i][5] 
      var slugUrl = matches[i][6] 

      //get the user's image, and if it's missing, call the correct image path 
      if(matches[i][0] === "thumb/missing.png") { 
       var image = "http://localhost:3000/assets/medium/missing-e38aa1831b278c511eff9812efc6fda028d46b3b94f71cc88c3e0ba0e99ff19e.png" 
      } else { 
       var image = "http://" + location.host + matches[i][0]; 
      } 

      //if the user has lat lng, plot them on the map 
      if (lat != null) { 
       var contentString = '<div>'+'<h1>Hello '+ firstName +'</h1>'+'</div>' 
       var infowindow = new google.maps.InfoWindow({ 
        content: contentString 
       }); 

       marker = new CustomMarker(
        new google.maps.LatLng(lat, lng), 
        map, 
        image, 
        firstName, 
        contentString) 
       marker.info = new google.maps.InfoWindow({ 
        content: contentString 
       }); 
       google.maps.event.addListener(marker, 'click', (function (marker, i) { 
        infowindow.open(map, marker); 
       } 
       )(marker, i)); 
       markers.push(marker); 
      } 
     } 
    var markerCluster = new MarkerClusterer(map, markers, 
     {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
}); 

} 
initMap(); 

function CustomMarker(latlng, map, imageSrc, firstName, contentString) { 
    this.latlng_ = latlng; 
    this.imageSrc = imageSrc; 
    this.firstName = firstName 
    $(this).on('click', function (event) { 
     console.log('click') 
    }); 
    // Once the LatLng and text are set, add the overlay to the map. This will 
    // trigger a call to panes_changed which should in turn call draw. 
    this.setMap(map); 
} 
CustomMarker.prototype = new google.maps.OverlayView(); 
CustomMarker.prototype.draw = function() { 
    // Check if the div has been created. 
    var div = this.div_; 
    if (!div) { 
     // Create a overlay text DIV 
     div = this.div_ = document.createElement('div'); 
     // Create the DIV representing our CustomMarker 
     div.className = "customMarker" 
     var img = document.createElement("img"); 
     img.src = this.imageSrc; 
     div.appendChild(img); 
     google.maps.event.addDomListener(marker, "click", function (event) { 
      google.maps.event.trigger(me, "click"); 
     }); 
     // Then add the overlay to the DOM 
     var panes = this.getPanes(); 
     panes.overlayImage.appendChild(div); 
    } 
    // Position the overlay 
    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 
    if (point) { 
     div.style.left = point.x + 'px'; 
     div.style.top = point.y + 'px'; 
    } 
}; 
CustomMarker.prototype.remove = function() { 
    // Check if the overlay was on the map and needs to be removed. 
    if (this.div_) { 
     this.div_.parentNode.removeChild(this.div_); 
     this.div_ = null; 
    } 
}; 
//create a prototype of the image marker 
CustomMarker.prototype.getPosition = function() { 
    return this.latlng_; 
}; 
</script> 

爲什麼infowindows在加載時打開，如果它們在eventListener函數中？

如果您需要更多詳細信息，請讓我知道。謝謝！

Answer 1

正如評論所說，你已經創建了一個Immediately-Invoked Function Expression (IIFE)

從wikipedia.org：

一個立即調用的函數表達式（或IIFE，發音 「玄乎」）是一個JavaScript編程語言使用JavaScript的函數作用域產生一個 詞法作用域的成語。立即調用 函數表達式可用於避免在塊內從 提升變量，防止污染全局環境，同時允許公開訪問方法，同時保留函數中定義的變量的隱私 。

其中添加了標記的點擊處理程序的一部分，你的腳本執行以下操作：

創建一個匿名的功能，通過它的電流（和索引i）並立即執行：

(function (marker, i) { infowindow.open(map, marker); })(marker, i) 

此IIFE（undefined）的結果是比用作標記的點擊處理程序：

google.maps.event.addListener(marker, 'click', undefined); 

除非你可以切換到ES6和let你將不得不使用IIFE防止範圍的問題：

Javascript infamous Loop issue?
JavaScript closure inside loops – simple practical example

---

使你的腳本的工作，你必須改變這部分：

google.maps.event.addListener(marker, 'click', (function (marker, i) { 
    infowindow.open(map, marker); 
})(marker, i)); 

要：

google.maps.event.addListener(marker, 'click', (function (marker) { // I've removed the index because it is unused 
    return function() { infowindow.open(map, marker); }; 
})(marker));