谷歌地图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));