如果用戶縮小并且標記被吸收到MarkerClusterer集群中，則關閉標記上的資訊視窗-有解無憂

我在 Google Maps 中使用了 markerclustererplus。我有多個標記，并且我已經將其設定為一次只顯示一個 InfoWindow。如果用戶單擊標記，則會出現一個資訊視窗。如果用戶縮小并且標記被吸收到一個簇中，資訊視窗就會消失。這可以。如果用戶立即放大，并且標記與群集分離并變為可見，則資訊視窗會再次出現。我希望這樣，如果用戶縮小并且標記被吸收到集群中，那么實際上關閉/洗掉資訊視窗，并呼叫特定的用戶定義函式。

我嘗試了很多東西，包括這個 StackOverflow 鏈接中的建議。資訊視窗不會關閉。鏈接中的答案相對較舊，所以我想知道目前是否有替代解決方案。

編輯：抱歉之前不完整的代碼。我正在使用 MarkerClustererPlus v1.2.7。

這是一個JSfiddle。

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBchuqg8C9g8o_o9I5vqxSiiHxdOFBmpHU" async defer></script>
<script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
<script type="text/javascript" src="mark.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>


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.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();
                            }

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

uj5u.com熱心網友回復：

當您打開InfoWindowusing 語法時infowindow.open(map, marker);，它似乎使用與map關聯的marker來隱藏/顯示infowindow. 將該代碼更改為：

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

洗掉該依賴項。

概念證明小提琴

代碼片段：

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

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

<!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>
   <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>

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

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

上一篇：在GoogleMaps的“map_changed”偵聽器中呼叫的函式被多次呼叫

下一篇：我可以使用自定義樣式在@react-google-maps/api上加載訊息嗎