Google 地图信息窗口在加载时打开，而不是在单击时打开

Question

我一直在为此努力，我已经很接近了！第一次使用 CustomMarker 和 MarkerCluster.

以下 javascript 工作完美，除了信息窗口在页面加载时全部打开。我希望它们在点击标记时打开。

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

为什么信息窗口在加载时打开，如果它们在 eventListener 函数中？

如果您需要更多详细信息，请告诉我。谢谢！

Answer 1

如评论中所述，您创建了 Immediately-Invoked Function Expression (IIFE)

来自 wikipedia.org:

An immediately-invoked function expression (or IIFE, pronounced "iffy") is a JavaScript programming language idiom which produces a lexical scope using JavaScript's function scoping. Immediately-invoked function expressions can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.

添加标记点击处理程序的部分，您的脚本执行以下操作：

创建一个匿名函数，将当前 marker（和索引 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));

Google 地图信息窗口在加载时打开，而不是在单击时打开

Google Maps InfoWindow opens on load, not onclick

javascript

google-maps

infowindow