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，发音为＆＃34; iffy＆＃34;）是一种JavaScript编程语言习语，它产生一个使用JavaScript函数范围的词法范围。立即调用的函数表达式可用于避免变量提升在街区内，防止污染全球环境和同时允许公众访问方法，同时保留隐私对于函数中定义的变量。

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

创建一个匿名函数，将其传递给当前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地图InfoWindow会在加载时打开，而不是onclick

1 个答案: