Скрыть MarkerClusterer на карте Google? - PullRequest
Новая
       2

Скрыть MarkerClusterer на карте Google?

0 голосов
/ 10 марта 2019

Это мой основной код для добавления маркеров и кластеризации на карту Google. 

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="data.json"></script>
    <script type="text/javascript" src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

    <script>
      function initialize() {
        var center = new google.maps.LatLng(37.4419, -122.1419);

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var markers = [];
        for (var i = 0; i < 100; i++) {
          var dataPhoto = data.photos[i];
          var latLng = new google.maps.LatLng(dataPhoto.latitude,
              dataPhoto.longitude);
          var marker = new google.maps.Marker({
            position: latLng
          });
          markers.push(marker);
        }
        var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
        for (var i in markers) {
        markers[i].setVisible(false);
}

markerCluster.repaint();

      }

      google.maps.event.addDomListener(window, 'load', initialize);

    </script>

Работает нормально, но я хочу обработать маркер скрытия / показа кластера. Как я могу скрыть и показать MarkerClusterer (номер и значок) в Google Maps?

Я попробовал код ниже, но он не работает. 

        var markerCluster = new MarkerClusterer(map, markers, { ignoreHidden: true });
        for (var i in markers) {
        markers[i].setVisible(false);
}

markerCluster.repaint();

Ответы [ 2 ]

2 голосов
/ 10 марта 2019

Я бы предложил использовать MarkerClustererPlus .

С помощью этой библиотеки вы можете добавить прослушиватель в кластер и использовать его, чтобы скрыть маркеры в этом кластере, скрывая кластер: 

google.maps.event.addListener(markerCluster, 'click', function(cluster) {
  var clusterMarks = cluster.getMarkers();
  for (var i in clusterMarks) {
    clusterMarks[i].setVisible(false);
  }

  markerCluster.repaint(); 
  })
}

Если вы хотите, чтобы маркеры отображались при увеличении карты (или для отображения, когда кластер скрыт), вам потребуется написать код для этого (этот код просто скрывает маркеры вкластер щелчка).

подтверждение концепции скрипта

фрагмент кода: 

function initialize() {
  var center = new google.maps.LatLng(37.4419, -122.1419);

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var markers = [];
  console.log(data.photos.length);
  for (var i = 0; i < data.photos.length; i++) {
    var dataPhoto = data.photos[i];
    var latLng = new google.maps.LatLng(dataPhoto.latitude,
      dataPhoto.longitude);
    var marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
    markers.push(marker);
  }
  console.log(markers.length);
  var markerCluster = new MarkerClusterer(map, markers, {
    ignoreHidden: true,
    zoomOnClick: false,
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  });
  google.maps.event.addListener(markerCluster, 'click', function(cluster) {
    var clusterMarks = cluster.getMarkers();
    for (var i in clusterMarks) {
      clusterMarks[i].setVisible(false);
    }
    markerCluster.repaint();
  })
}
var data = {
  "count": 13,
  "photos": [{
      "photo_id": 665502,
      "photo_title": "Sunset Beach Walker",
      "photo_url": "http://www.panoramio.com/photo/665502",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/665502.jpg",
      "longitude": -124.077530,
      "latitude": 44.519888,
      "width": 500,
      "height": 340,
      "upload_date": "03 February 2007",
      "owner_id": 107359,
      "owner_name": "Ron Cooper",
      "owner_url": "http://www.panoramio.com/user/107359"
    },
    {
      "photo_id": 723666,
      "photo_title": "Majestically Still",
      "photo_url": "http://www.panoramio.com/photo/723666",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/723666.jpg",
      "longitude": -116.175613,
      "latitude": 51.327608,
      "width": 500,
      "height": 332,
      "upload_date": "07 February 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 723015,
      "photo_title": "Cape Flattery (infrared)",
      "photo_url": "http://www.panoramio.com/photo/723015",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/723015.jpg",
      "longitude": -124.726700,
      "latitude": 48.385898,
      "width": 500,
      "height": 332,
      "upload_date": "07 February 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 1213006,
      "photo_title": "Twilight Drive",
      "photo_url": "http://www.panoramio.com/photo/1213006",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1213006.jpg",
      "longitude": -114.481916,
      "latitude": 51.095841,
      "width": 500,
      "height": 335,
      "upload_date": "07 March 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 298967,
      "photo_title": "Antelope Canyon, Ray of Light",
      "photo_url": "http://www.panoramio.com/photo/298967",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/298967.jpg",
      "longitude": -111.407890,
      "latitude": 36.894037,
      "width": 500,
      "height": 375,
      "upload_date": "04 January 2007",
      "owner_id": 64388,
      "owner_name": "Artusi",
      "owner_url": "http://www.panoramio.com/user/64388"
    },
    {
      "photo_id": 1781717,
      "photo_title": "Water Cuts Rock",
      "photo_url": "http://www.panoramio.com/photo/1781717",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1781717.jpg",
      "longitude": -113.047771,
      "latitude": 37.312154,
      "width": 333,
      "height": 500,
      "upload_date": "15 April 2007",
      "owner_id": 376395,
      "owner_name": "JeffSullivan (www.MyPhotoGuides.com)",
      "owner_url": "http://www.panoramio.com/user/376395"
    },
    {
      "photo_id": 498352,
      "photo_title": "Wave",
      "photo_url": "http://www.panoramio.com/photo/498352",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/498352.jpg",
      "longitude": -112.005315,
      "latitude": 36.995972,
      "width": 500,
      "height": 333,
      "upload_date": "20 January 2007",
      "owner_id": 40260,
      "owner_name": "Don Albonico",
      "owner_url": "http://www.panoramio.com/user/40260"
    },
    {
      "photo_id": 3749005,
      "photo_title": "Once in a Blue Moon....",
      "photo_url": "http://www.panoramio.com/photo/3749005",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/3749005.jpg",
      "longitude": -105.654080,
      "latitude": 40.294560,
      "width": 374,
      "height": 500,
      "upload_date": "05 August 2007",
      "owner_id": 87752,
      "owner_name": "Richard Ryer",
      "owner_url": "http://www.panoramio.com/user/87752"
    },
    {
      "photo_id": 5358174,
      "photo_title": "Morning Glory",
      "photo_url": "http://www.panoramio.com/photo/5358174",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/5358174.jpg",
      "longitude": -110.843537,
      "latitude": 44.475020,
      "width": 500,
      "height": 348,
      "upload_date": "16 October 2007",
      "owner_id": 66847,
      "owner_name": "Lukas Novak",
      "owner_url": "http://www.panoramio.com/user/66847"
    },
    {
      "photo_id": 400536,
      "photo_title": "Half Dome Mtn, Yosemite Nat Park,  CA",
      "photo_url": "http://www.panoramio.com/photo/400536",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/400536.jpg",
      "longitude": -119.495888,
      "latitude": 37.811411,
      "width": 500,
      "height": 333,
      "upload_date": "12 January 2007",
      "owner_id": 85489,
      "owner_name": "Bruce MacIver",
      "owner_url": "http://www.panoramio.com/user/85489"
    },
    {
      "photo_id": 400536,
      "photo_title": "Half Dome Mtn, Yosemite Nat Park,  CA",
      "photo_url": "http://www.panoramio.com/photo/400536",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/400536.jpg",
      "longitude": -119.495888,
      "latitude": 37.811411,
      "width": 500,
      "height": 333,
      "upload_date": "12 January 2007",
      "owner_id": 85489,
      "owner_name": "Bruce MacIver",
      "owner_url": "http://www.panoramio.com/user/85489"
    },
    {
      "photo_id": 1800454,
      "photo_title": "Bombay Beach, Salton Sea, CA",
      "photo_url": "http://www.panoramio.com/photo/1800454",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1800454.jpg",
      "longitude": -115.729235,
      "latitude": 33.347316,
      "width": 500,
      "height": 407,
      "upload_date": "16 April 2007",
      "owner_id": 107613,
      "owner_name": "Tom Grubbe",
      "owner_url": "http://www.panoramio.com/user/107613"
    },
    {
      "photo_id": 882660,
      "photo_title": "icy_chains_1_hdr_web",
      "photo_url": "http://www.panoramio.com/photo/882660",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/882660.jpg",
      "longitude": -79.798197,
      "latitude": 43.321353,
      "width": 500,
      "height": 333,
      "upload_date": "18 February 2007",
      "owner_id": 17488,
      "owner_name": "John Gillett",
      "owner_url": "http://www.panoramio.com/user/17488"
    },
    {
      "photo_id": 1413,
      "photo_title": "Champlain Lookout",
      "photo_url": "http://www.panoramio.com/photo/1413",
      "photo_file_url": "http://mw2.google.com/mw-panoramio/photos/medium/1413.jpg",
      "longitude": -75.912872,
      "latitude": 45.507640,
      "width": 500,
      "height": 375,
      "upload_date": "06 October 2005",
      "owner_id": 273,
      "owner_name": "JC",
      "owner_url": "http://www.panoramio.com/user/273"
    },
  ]
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>
<script src="https://cdn.jsdelivr.net/npm/@google/markerclustererplus@2.1.11/src/markerclusterer.js"></script>
0 голосов
/ 10 марта 2019

вы можете скрыть маркеры, установив его в ноль.

Для скрытых маркеров ... 

function hideMarkers() {
    for (let i in markers) {
        markers[i].setMap(null);
    }
    markerCluster.clearMarkers();
}

для выставочных маркеров 

function showMarkers() {
for (let i in markers) {
    markers[i].setMap(map);
}
markerCluster.addMarkers(markers);

}

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...