Google Maps JavaScript-将多个标记添加到一张地图

Question

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

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"));
                });
            }

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

我不确定如何解决此问题。

Answer 1

发生的事情是您要遍历所有篮球场，为每个标记创建一个事件侦听器。 一切都很好。 但是，该事件侦听器函数如下所示：

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

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

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