javascript - Google map JavaScript - 将多个标记添加到一张 map

Question

我在 JavaScript 中为 Google map 标记设置事件处理程序时遇到困难。下面是我的代码:

var map = new google.maps.Map(document.getElementById('map-canvas'), {
                zoom: 8,
                center: {lat: -35, lng: 149}
            });
            for (var i = 0; i < basketballCourts.length; i++) {
                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(basketballCourts[i].latitude, basketballCourts[i].longitude),
                    map: map,
                    title: 'Hello World!'
                });
                marker.set("data-index", i);
                google.maps.event.addListener(marker, 'click', function() {
                    console.log(marker.get("data-index"));
                });
            }

您会注意到标记有一个单击事件。但是，所有标记的点击事件都是相同的。每次标记点击都应该记录不同的数字，但无论我点击哪个标记，我都会得到相同的响应。

我不知道如何解决这个问题。

Answer 1

发生的情况是您循环遍历所有篮球场，为每个标记创建一个事件监听器。这一切都很好。然而，该事件监听器函数如下所示:

console.log(marker.get("data-index"));

该函数是在响应标记单击时执行的，而不是在您定义它时执行。函数执行时 marker 的值将是它在所有篮球场循环结束时的值。

使用@MiltoxBeyond的建议，尝试使用this.get("data-index")