在GoogleMaps的“map_changed”偵聽器中呼叫的函式被多次呼叫-有解無憂

我在 Google Maps 中使用了 markerclustererplus。我有多個標記，并且我已經將其設定為一次只顯示一個 InfoWindow。如果用戶單擊標記，則會出現一個資訊視窗。如果用戶縮小并且標記被吸收到集群中，則資訊視窗將關閉。

我使用標記的“map_changed”偵聽器來檢查標記是否已被“吸收”到集群中。如果是這樣，InfoWindow 將關閉，我只想呼叫另一個函式一次。問題是在我當前的代碼中，該函式被多個標記呼叫。

如何僅將“map_changed”偵聽器添加到當前選擇的標記？如果這是不可能的，我怎樣才能防止該函式被多次呼叫？我是否需要暫時將“map_changed”偵聽器移除到非選定標記？

我要呼叫的函式名為“closeMarker()”。請參閱JSfiddle。

JS：

var map;

function loadMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -41.75,
      lng: 172.75
    },
    zoom: 4
  });

  addMarkers();
}
var WeatherStations = [{
    "stn": 719460,
    "wban": 99999,
    "StationName": "FORT SIMPSON",
    "FIPS": "CA",
    "Latitude": 61.759998322,
    "Longitude": -121.2369995,
    "Elevation_m": 169,
    "NOAAReadings": 14952
  }, {
    "stn": 935970,
    "wban": 99999,
    "StationName": "CAPE CAMPBELL AWS",
    "FIPS": "NZ",
    "Latitude": -41.71699905,
    "Longitude": 174.26699829,
    "Elevation_m": 32,
    "NOAAReadings": 12174
  },
  {
    "stn": 934360,
    "wban": 99999,
    "StationName": "WELLINGTON INTL",
    "FIPS": "NZ",
    "Latitude": -41.32699966,
    "Longitude": 174.80499268,
    "Elevation_m": 12,
    "NOAAReadings": 9914
  }, {
    "stn": 937090,
    "wban": 99999,
    "StationName": "HAAST AWS",
    "FIPS": "NZ",
    "Latitude": -43.86700058,
    "Longitude": 169,
    "Elevation_m": 5,
    "NOAAReadings": 14371
  },
  {
    "stn": 935270,
    "wban": 99999,
    "StationName": "FAREWELL SPIT AWS",
    "FIPS": "NZ",
    "Latitude": -40.54999924,
    "Longitude": 173,
    "Elevation_m": 3,
    "NOAAReadings": 11575
  }, {
    "stn": 935460,
    "wban": 99999,
    "StationName": "NELSON AERODROME AWS",
    "FIPS": "NZ",
    "Latitude": -41.29999924,
    "Longitude": 173.19999695,
    "Elevation_m": 6,
    "NOAAReadings": 10557
  },
  {
    "stn": 937800,
    "wban": 99999,
    "StationName": "CHRISTCHURCH INTL",
    "FIPS": "NZ",
    "Latitude": -43.48899841,
    "Longitude": 172.53199768,
    "Elevation_m": 38,
    "NOAAReadings": 14933
  }, {
    "stn": 938050,
    "wban": 99999,
    "StationName": "PUYSEGUR POINT AWS",
    "FIPS": "NZ",
    "Latitude": -46.15000153,
    "Longitude": 166.6000061,
    "Elevation_m": 44,
    "NOAAReadings": 10493
  },
  {
    "stn": 939940,
    "wban": 99999,
    "StationName": "RAOUL ISLAND AWS",
    "FIPS": "NZ",
    "Latitude": -29.25,
    "Longitude": -177.9329987,
    "Elevation_m": 50,
    "NOAAReadings": 11001
  }
];

var styles = [
  [{
    url: "https://i.imgur.com/4dzjY47.png",
    height: 47,
    width: 48,
    anchorText: [14, 0],
    textColor: '#fff',
    textSize: 11
  }, {
    url: 'https://i.imgur.com/My5Cgpd.png',
    height: 47,
    width: 48,
    anchorText: [14, 0],
    textColor: '#fff',
    textSize: 11
  }, {
    url: 'https://i.imgur.com/t7SvOax.png',
    height: 47,
    width: 48,
    anchorText: [14, 0],
    textColor: '#fff',
    textSize: 11
  }]
];

var prev_infowindow = false; // to close previously-opened infowindows
var dataSourceType = 0; // 0 = grid; 1 = weatherstation
var gStn;
var gWban;
var gMarkerLat;
var gMarkerLng;
var gMarkerName;
var iw;
var iwClosed = false;
var curMark;
var infowindow;

function addMarkers() {
  infowindow = new google.maps.InfoWindow();

  var markers = [];

  for (var i = 0; i < WeatherStations.length; i  ) {
    var latLng = new google.maps.LatLng(WeatherStations[i].Latitude, WeatherStations[i].Longitude)

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      visible: true,
      zIndex: 10,

    });

    var content = "<div id='"   WeatherStations[i].stn   " '> <div class='scrollfix'><b>"   WeatherStations[i].StationName   "</b>";

    google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
      return function() {
        curMark = this;
        // Close already-opened InfoWindow
        if (prev_infowindow) {
          prev_infowindow.close();
        }

        prev_infowindow = infowindow;

        infowindow.setContent(content);
        infowindow.setOptions({
          pixelOffset: new google.maps.Size(0, -42)
        })
        infowindow.setPosition(marker.getPosition())
        infowindow.open(map, /* marker */ );
      };
    })(marker, content, infowindow));


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

      var clusters = markerClusterer.getClusters(); // use the get clusters method which returns an array of objects

      for (let i = 0, l = clusters.length; i < l; i  ) {
        const markers = clusters[i].getMarkers();
        for (const m of markers) {
          if (m === curMark && markers.length > 1) {


            try {
              if (infowindow !== null) {

                infowindow.close();
                infowindow = null;
              }
              if (prev_infowindow) {
                prev_infowindow.close();
              }
                         closeMarker();
            } catch (ee) {}
          }
        }
      }
    });

    markers.push(marker);
  }

  var zoom = null;
  var size = null;
  var style = 0;

  markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: zoom,
    gridSize: size,
    styles: styles[style]
  });
}

function clearClusters() {
  markerClusterer.clearMarkers();
}

function closeMarker()
{
    console.log('x');
}

HTML：

<!DOCTYPE html>
    <html>
    <head>
      <title>Google Maps Marker Example</title>
    
    <script src="https://maps.googleapis.com/maps/api/js" async defer></script>
            <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
       <script type="text/javascript" src="mark.js"></script>
      <script>
      
        
      </script>
      <style>
        #map {
          width: 500px;
          height: 500px;
          border: thin solid black;
        }
      </style>
    </head>
    <body onload="loadMap();">
      <h1>Google Maps Marker Example</h1>
      <div id="map"></div>
    </body>
    </html>

uj5u.com熱心網友回復：

解決這個問題的一個選擇是將變數設定curMark到null當您關閉它的InfoWindow與呼叫轉移到closeMark該關閉的代碼InfoWindow，并設定curMark變數null。

另外，不確定您為什么要設定infowindow到null那里，但是如果您這樣做，它只會呼叫closeMarker一次。

更新的map_changed監聽器：

google.maps.event.addListener(marker, 'map_changed', function() {
   var clusters = markerClusterer.getClusters(); // use the get clusters method which returns an array of objects
   for (let i = 0, l = clusters.length; i < l; i  ) {
     const markers = clusters[i].getMarkers();
     for (const m of markers) {
       if (m === curMark && markers.length > 1) {
         try {
           if (infowindow !== null) {
             infowindow.close();
             closeMarker();
             curMark=null;
           }
           if (prev_infowindow) {
             prev_infowindow.close();
           }
         } catch (ee) {}
      }
     }
   }
});

概念證明小提琴

代碼片段：

var map;

function loadMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -41.75,
      lng: 172.75
    },
    zoom: 4
  });

  addMarkers();
}
var WeatherStations = [{
    "stn": 719460,
    "wban": 99999,
    "StationName": "FORT SIMPSON",
    "FIPS": "CA",
    "Latitude": 61.759998322,
    "Longitude": -121.2369995,
    "Elevation_m": 169,
    "NOAAReadings": 14952
  }, {
    "stn": 935970,
    "wban": 99999,
    "StationName": "CAPE CAMPBELL AWS",
    "FIPS": "NZ",
    "Latitude": -41.71699905,
    "Longitude": 174.26699829,
    "Elevation_m": 32,
    "NOAAReadings": 12174
  },
  {
    "stn": 934360,
    "wban": 99999,
    "StationName": "WELLINGTON INTL",
    "FIPS": "NZ",
    "Latitude": -41.32699966,
    "Longitude": 174.80499268,
    "Elevation_m": 12,
    "NOAAReadings": 9914
  }, {
    "stn": 937090,
    "wban": 99999,
    "StationName": "HAAST AWS",
    "FIPS": "NZ",
    "Latitude": -43.86700058,
    "Longitude": 169,
    "Elevation_m": 5,
    "NOAAReadings": 14371
  },
  {
    "stn": 935270,
    "wban": 99999,
    "StationName": "FAREWELL SPIT AWS",
    "FIPS": "NZ",
    "Latitude": -40.54999924,
    "Longitude": 173,
    "Elevation_m": 3,
    "NOAAReadings": 11575
  }, {
    "stn": 935460,
    "wban": 99999,
    "StationName": "NELSON AERODROME AWS",
    "FIPS": "NZ",
    "Latitude": -41.29999924,
    "Longitude": 173.19999695,
    "Elevation_m": 6,
    "NOAAReadings": 10557
  },
  {
    "stn": 937800,
    "wban": 99999,
    "StationName": "CHRISTCHURCH INTL",
    "FIPS": "NZ",
    "Latitude": -43.48899841,
    "Longitude": 172.53199768,
    "Elevation_m": 38,
    "NOAAReadings": 14933
  }, {
    "stn": 938050,
    "wban": 99999,
    "StationName": "PUYSEGUR POINT AWS",
    "FIPS": "NZ",
    "Latitude": -46.15000153,
    "Longitude": 166.6000061,
    "Elevation_m": 44,
    "NOAAReadings": 10493
  },
  {
    "stn": 939940,
    "wban": 99999,
    "StationName": "RAOUL ISLAND AWS",
    "FIPS": "NZ",
    "Latitude": -29.25,
    "Longitude": -177.9329987,
    "Elevation_m": 50,
    "NOAAReadings": 11001
  }
];

var styles = [
  [{
    url: "https://i.imgur.com/4dzjY47.png",
    height: 47,
    width: 48,
    anchorText: [14, 0],
    textColor: '#fff',
    textSize: 11
  }, {
    url: 'https://i.imgur.com/My5Cgpd.png',
    height: 47,
    width: 48,
    anchorText: [14, 0],
    textColor: '#fff',
    textSize: 11
  }, {
    url: 'https://i.imgur.com/t7SvOax.png',
    height: 47,
    width: 48,
    anchorText: [14, 0],
    textColor: '#fff',
    textSize: 11
  }]
];

var prev_infowindow = false; // to close previously-opened infowindows
var dataSourceType = 0; // 0 = grid; 1 = weatherstation
var gStn;
var gWban;
var gMarkerLat;
var gMarkerLng;
var gMarkerName;
var iw;
var iwClosed = false;
var curMark;
var infowindow;

function addMarkers() {
  infowindow = new google.maps.InfoWindow();

  var markers = [];

  for (var i = 0; i < WeatherStations.length; i  ) {
    var latLng = new google.maps.LatLng(WeatherStations[i].Latitude, WeatherStations[i].Longitude)

    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      visible: true,
      zIndex: 10,

    });

    var content = "<div id='"   WeatherStations[i].stn   " '> <div class='scrollfix'><b>"   WeatherStations[i].StationName   "</b>";

    google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) {
      return function() {
        curMark = this;
        // Close already-opened InfoWindow
        if (prev_infowindow) {
          prev_infowindow.close();
        }

        prev_infowindow = infowindow;

        infowindow.setContent(content);
        infowindow.setOptions({
          pixelOffset: new google.maps.Size(0, -42)
        })
        infowindow.setPosition(marker.getPosition())
        infowindow.open(map);
      };
    })(marker, content, infowindow));


    google.maps.event.addListener(marker, 'map_changed', function() {
      var clusters = markerClusterer.getClusters(); // use the get clusters method which returns an array of objects
      for (let i = 0, l = clusters.length; i < l; i  ) {
        const markers = clusters[i].getMarkers();
        for (const m of markers) {
          if (m === curMark && markers.length > 1) {
            try {
              if (infowindow !== null) {

                infowindow.close();
                closeMarker();
                curMark=null;
              }
              if (prev_infowindow) {
                prev_infowindow.close();
              }
            } catch (ee) {}
          }
        }
      }
    });

    markers.push(marker);
  }

  var zoom = null;
  var size = null;
  var style = 0;

  markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: zoom,
    gridSize: size,
    styles: styles[style]
  });
}

function clearClusters() {
  markerClusterer.clearMarkers();
}

function closeMarker() {
  console.log('x');
}

<!DOCTYPE html>
<html>
<head>
  <title>Google Maps Marker Example</title>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk" async defer></script>
        <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
  <style>
    #map {
      width: 500px;
      height: 500px;
      border: thin solid black;
    }
  </style>
</head>
<body onload="loadMap();">
  <h1>Google Maps Marker Example</h1>
  <div id="map"></div>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/358048.html

標籤：javascript 谷歌地图谷歌地图标记信息窗口标记聚类器

上一篇：在FlutterApp中使用谷歌地圖時出錯

下一篇：如果用戶縮小并且標記被吸收到MarkerClusterer集群中，則關閉標記上的資訊視窗