如何为列表中的每个标记创建单独的监听器

Question

一旦你这样做：const currencies = [euro, yen];没有从back 到或从back 到 的链接。获取和变量的值并将这些值放入数组中。currencies[0]eurocurrencies[1]yen[euro, yen]euroyen尝试对您所拥有的进行最小的更改，您可以使用对象而不是数组：for (let [currencyName, currencyValue] of Object.entries({euro, yen})) {        const pair = await fetchPairData(currencyValue, dollar);    const route = new Route([pair], dollar);    console.log(currencyName, currencyValue + route.midPrice.toSignificant(6));}我有一个坐标列表，通过它在地图上设置标记。标记仅以小于 12 的放大倍数出现在地图上。我想使当我单击标记时执行某些功能，并且仅执行一次。现在事情是这样的：for (let i = 0; i < locationsCoordinates.length; i++) {    const bridge = locationsCoordinates[i];    markers.push( new google.maps.Marker({        position: bridge[1],        title: bridge[0],        map,        icon: 'img/bridges.png',        clickable: true,    }));}google.maps.event.addListener(map, 'zoom_changed', function() {    let zoom = map.getZoom();    if (zoom < 12) {        for (let i = 0; i < markers.length; i++) {            markers[i].setVisible(false);            markers[i].addListener("click", function (event) {                test +=1;            });            }        }     else {        for (let i = 0; i < markers.length; i++) {            markers[i].setVisible(true);        }    }})问题是，对于这样的代码，当您单击任何标记时，该函数会运行多次。

Answer 1

您需要使用addListenerOnce并稍微重构您的代码。像这样的东西

var locationsCoordinates = [{lat: 12.84, lng: 122.89}, {lat: 12.80, lng: 122.93}, {lat: 12.74, lng: 122.85}];

var markers = [];

for (let i = 0; i < locationsCoordinates.length; i++) {

    var marker = new google.maps.Marker({

        position: locationsCoordinates[i],

        map

    });

    

    google.maps.event.addListenerOnce(marker, "click", () => {

        console.log("marker", i, "clicked");

    });

    

    markers.push(marker);

}

google.maps.event.addListener(map, 'zoom_changed', function() {

    let zoom = map.getZoom();

    if (zoom < 12) {

        for (let i = 0; i < markers.length; i++) {

            markers[i].setVisible(false);

        }

    } else {

        for (let i = 0; i < markers.length; i++) {

            markers[i].setVisible(true);

        }

    }

})

Answer 2

创建标记时，将侦听器添加到标记，如相关示例中所示。不在zoom_changed地图上的事件监听器中。

不确定为什么要在标记隐藏时添加侦听器（.setVisible(false)大小写），而不是在显示标记时添加侦听器，但如果在创建标记时将侦听器添加到标记，则不需要执行任何特殊操作。

相关问题使用函数闭包将标记与其InfoWindow内容相关联（或者单击标记时您想要执行的任何操作），下面的代码使用关键字let，这是该问题的现代解决方案，但函数更接近可以用作好吧，特别是如果您需要支持旧版浏览器。

  for (let i = 0; i < locationsCoordinates.length; i++) {

    const bridge = locationsCoordinates[i];

    let marker = new google.maps.Marker({

      position: bridge[1],

      title: bridge[0],

      map,

      icon: 'img/bridges.png',

      clickable: true,

    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function(evt) {

      infowindow.setContent(locationsCoordinates[i][0]);

      infowindow.open(map, marker);

      test += 1;

    });

  }

  google.maps.event.addListener(map, 'zoom_changed', function() {

    let zoom = map.getZoom();

    if (zoom < 12) {

      for (let i = 0; i < markers.length; i++) {

        markers[i].setVisible(false);

      }

    } else {

      for (let i = 0; i < markers.length; i++) {

        markers[i].setVisible(true);

      }

    }

  })

概念证明小提琴

代码片段：

// The following example creates markers to indicate beaches near

// Sydney, NSW, Australia. 

let markers = [];

let test = 0;

function initMap() {

  const map = new google.maps.Map(document.getElementById("map"), {

    zoom: 10,

    center: {

      lat: -33.9,

      lng: 151.2

    },

  });

  let infowindow = new google.maps.InfoWindow();

  // Adds markers to the map.

  for (let i = 0; i < locationsCoordinates.length; i++) {

    const bridge = locationsCoordinates[i];

    let marker = new google.maps.Marker({

      position: bridge[1],

      title: bridge[0],

      map,

      clickable: true,

    });

    markers.push(marker);

    google.maps.event.addListener(marker, 'click', function(evt) {

      infowindow.setContent(locationsCoordinates[i][0]);

      infowindow.open(map, marker);

      test += 1;

      console.log("open infowindow:" + this.getTitle() + " test=" + test);

    });

  }

  google.maps.event.addListener(map, 'zoom_changed', function() {

    let zoom = map.getZoom();

    if (zoom < 12) {

      infowindow.close();

      for (let i = 0; i < markers.length; i++) {

        markers[i].setVisible(false);

      }

    } else {

      for (let i = 0; i < markers.length; i++) {

        markers[i].setVisible(true);

      }

    }

  })

}

// Data for the markers consisting of a name and a LatLng.

const locationsCoordinates = [

  ["Bondi Beach", {

    lat: -33.890542,

    lng: 151.274856

  }],

  ["Coogee Beach", {

    lat: -33.923036,

    lng: 151.259052

  }],

  ["Cronulla Beach", {

    lat: -34.028249,

    lng: 151.157507

  }],

  ["Manly Beach", {

    lat: -33.80010128657071,

    lng: 151.28747820854187

  }],

  ["Maroubra Beach", {

    lat: -33.950198,

    lng: 151.259302

  }],

];

/* Always set the map height explicitly to define the size of the div

       * element that contains the map. */

#map {

  height: 100%;

}

/* Optional: Makes the sample page fill the window. */

html,

body {

  height: 100%;

  margin: 0;

  padding: 0;

}

<!DOCTYPE html>

<html>

<head>

  <title>Complex Marker Icons</title>

  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=&v=weekly" defer></script>

  <!-- jsFiddle will insert css and js -->

</head>

<body>

  <div id="map"></div>

</body>

</html>