Javascript 地图中只有最后一个标记是可点击的答案

【问题标题】：Only last Marker is Clickable in Javascript MapJavascript 地图中只有最后一个标记是可点击的
【发布时间】：2018-12-08 04:47:05
【问题描述】：

我正在使用 Google Javascript Map API 来绘制保存在我的数据库中的所有餐厅我已经对 JSON 对象进行了编码，并制作了一组标记并绘制在地图上

var locations = [['You Are Here', position.coords.latitude, position.coords.longitude, 'user.png', 0]];
jsonresturant.forEach(element => {
    locations.push([element.site_title, element.site_lat, element.site_long, element.site_logo, element.site_id]);
});
var marker, i;

for (i = 0; i < locations.length; i++) {
    var icon = {
        url: `<?php echo base_url()?>uploads/logos/${locations[i][3]}`,
        scaledSize: new google.maps.Size(50, 50), // scaled size
        origin: new google.maps.Point(0, 0) // origin
    };
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        url: `<?php echo base_url()?>shop/?id=${locations[i][4]}`,
        title: locations[i][0],
        icon: icon
    });
}

现在我想让每个标记都可以点击

google.maps.event.addListener( marker, 'click',
    (function(marker, i) {
        return function() {
            window.location.href = this.url;
        };
    })(marker, i)
);

【问题讨论】：

为什么不能在循环内移动事件监听器？

标签： javascript arrays json google-maps

【解决方案1】：

修改您的代码，以便为每个标记绑定到一个事件侦听器。执行此操作时，将标记包装在闭包中很重要（正如您在第二个代码 sn-p 中所做的那样），以便传递正确的标记。

for (i = 0; i < locations.length; i++) {
    var icon = {
        url: `<?php echo base_url()?>uploads/logos/${locations[i][3]}`,
        scaledSize: new google.maps.Size(50, 50), // scaled size
        origin: new google.maps.Point(0, 0) // origin
    };
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        url: `<?php echo base_url()?>shop/?id=${locations[i][4]}`,
        title: locations[i][0],
        icon: icon
    });


    // bind to the event for marker
    google.maps.event.addListener( marker, 'click',
        (function(marker, i) {
            return function() {
                window.location.href = this.url;
            };
        })(marker, i)
    );
}

【讨论】：