Google Maps Marker Clusterer: маркеры никогда не группируются - PullRequest
Новая
       29

Google Maps Marker Clusterer: маркеры никогда не группируются

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

Я не знаю, почему кластер маркеров не показывает мои маркеры сгруппированы, как здесь: http://media.svennerberg.com/2009/01/screenshot_clusterereffect.jpg

Я столкнулся с проблемой в кластеризации маркеров карты Google.Я использую api v3, но по некоторым причинам, которые я не могу выяснить, я не могу применить кластеризацию маркеров.Буду благодарен за любую помощь и предложения.

Мой код выглядит так: 

<!DOCTYPE HTML>
<html lang="pl">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta charset="utf-8"/>		
		<meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
		<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD_n_0mOPCs7DxlW4t6rzSiD0KyUXQktVY&callback=myMap"></script>
      <script type="text/javascript">

         var map;
         var infoWindow;
         var markersData = [

            {lat: 50.25202,
            lng: 19.015023,
            name: "Test1",
            address1: "Test1",
            address2: "Test1",
            address3: "2019-03-13",
            address4: "2019-03-13",
            ikona: "http://historia-lokalna.pl/images/places.png" ,
            wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},

            {lat: 49.824791,
            lng: 19.040867,
            name: "Test2",
            address1: "Test2",
            address2: "Test2",
            address3: "2019-03-22",
            address4: "2019-03-22",
            ikona: "http://historia-lokalna.pl/images/places.png" ,
            wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},

            {lat: 50.334918,
            lng: 18.14136,
            name: "Test3",
            address1: "Test3",
            address2: "Test3",
            address3: "2019-03-08",
            address4: "2019-03-08",
            ikona: "http://historia-lokalna.pl/images/places.png" ,
            wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},

            {lat: 49.825794,
            lng: 19.040889,
            name: "Test4",
            address1: "Test4",
            address2: "Test4",
            address3: "2019-03-13",
            address4: "2019-03-13",
            ikona: "http://historia-lokalna.pl/images/places.png" ,
            wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"},
         ]

         function initialize() {
            var mapOptions = {
               center: new google.maps.LatLng(50.57628900072813,21.356987357139587),
               zoom: 9,
               mapTypeId: 'roadmap',
            };

            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
         
            infoWindow = new google.maps.InfoWindow();
            
            google.maps.event.addListener(map, 'click', function() {
               infoWindow.close();
            });
         
            displayMarkers();

            // I added a marker clusterer to manage the markers.

            var markerCluster = new MarkerClusterer(map, marker, 
               {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
            // End


         }

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



         function displayMarkers(){
      
            var bounds = new google.maps.LatLngBounds();
            
            for (var i = 0; i < markersData.length; i++){

               var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
               var name = markersData[i].name;
               var address1 = markersData[i].address1;
               var address2 = markersData[i].address2; 
               var address3 = markersData[i].address3; 
               var address4 = markersData[i].address4; 
               var image = markersData[i].ikona;
               var wwwsite = markersData[i].wwwsite;

               createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite);

               bounds.extend(latlng);  
            }
         
            map.fitBounds(bounds);
         }

         function createMarker(latlng, name, address1, address2,address3,address4, image, wwwsite){
            var marker = new google.maps.Marker({
               map: map,
               position: latlng,
               title: name,
               icon: image
            });

            google.maps.event.addListener(marker, 'click', function() {
         
               var iwContent = '<div id="iw_container">' +
                     '<div class="iw_title">' + name + '</div>' +
                  '<div class="iw_content">' + address1 + '<br />' +
                  address2 + '<br />' +address3 + '<br />' +address4 + '<br />' +
                  wwwsite + '</div></div>';
               
               
               infoWindow.setContent(iwContent);

               
               infoWindow.open(map, marker);
            });
         }
   
      </script>

      <!--  I added a javascript markerclusterer  -->

      <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
         
         <!--  End  -->


   </head>
	<body>
      
      <h2 class="przeg">Map:</h2>
      <div id="map-canvas"style="width:100%;height:600px;"> </div> 
    

    	
	</body>
</html>

1 Ответ

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

Глядя на пример в документации и ваш код, возможно, самое простое «исправление» - создать экземпляр кластерного маркера в вашей подпрограмме отображения маркеров, а затем добавить каждый маркер в кластеризатор по мере его создания:

Комментарии:

  1. у вас есть обратный вызов, указанный в вашем скрипте include (&callback=myMap), но нет функции с таким именем (просто удалите его из своего скрипта include). Вызывает эту ошибку в консоли: 
"myMap is not a function"
  1. В этой строке есть ошибка javascript Uncaught ReferenceError: marker is not defined: var markerCluster = new MarkerClusterer(map, marker,, поскольку в этой области нет доступной переменной marker (и, как заметил @MrUpsidown в своем комментарии, это должен быть массив маркеров). Для решения этой проблемы я предлагаю использовать метод MarkerClusterer.addMarker, чтобы добавить к нему маркеры в displayMarkers, и изменить функцию createMarker, чтобы она возвращала marker, который он создает. 
  function displayMarkers() {
    // marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, [], {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
    var bounds = new google.maps.LatLngBounds();
    for (var i = 0; i < markersData.length; i++) {
      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var address3 = markersData[i].address3;
      var address4 = markersData[i].address4;
      var image = markersData[i].ikona;
      var wwwsite = markersData[i].wwwsite;

      markerCluster.addMarker(createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite));
      bounds.extend(latlng);
    }
    map.fitBounds(bounds);
  }

  function createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite) {
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name,
      icon: image
    });
    google.maps.event.addListener(marker, 'click', function() {
      var iwContent = '<div id="iw_container">' +
        '<div class="iw_title">' + name + '</div>' +
        '<div class="iw_content">' + address1 + '<br />' +
        address2 + '<br />' + address3 + '<br />' + address4 + '<br />' +
        wwwsite + '</div></div>';
      infoWindow.setContent(iwContent);
      infoWindow.open(map, marker);
    });
    return marker;
  }

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

screenshot of resulting map

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script type="text/javascript">
  var map;
  var infoWindow;
  var markersData = [

    {
      lat: 50.25202,
      lng: 19.015023,
      name: "Test1",
      address1: "Test1",
      address2: "Test1",
      address3: "2019-03-13",
      address4: "2019-03-13",
      ikona: "http://historia-lokalna.pl/images/places.png",
      wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"
    },

    {
      lat: 49.824791,
      lng: 19.040867,
      name: "Test2",
      address1: "Test2",
      address2: "Test2",
      address3: "2019-03-22",
      address4: "2019-03-22",
      ikona: "http://historia-lokalna.pl/images/places.png",
      wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"
    },

    {
      lat: 50.334918,
      lng: 18.14136,
      name: "Test3",
      address1: "Test3",
      address2: "Test3",
      address3: "2019-03-08",
      address4: "2019-03-08",
      ikona: "http://historia-lokalna.pl/images/places.png",
      wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"
    },

    {
      lat: 49.825794,
      lng: 19.040889,
      name: "Test4",
      address1: "Test4",
      address2: "Test4",
      address3: "2019-03-13",
      address4: "2019-03-13",
      ikona: "http://historia-lokalna.pl/images/places.png",
      wwwsite: "<a href=https://www.historia-lokalna.pl target=_blank >Strona www</a>"
    },
  ]

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(50.57628900072813, 21.356987357139587),
      zoom: 9,
      mapTypeId: 'roadmap',
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    infoWindow = new google.maps.InfoWindow();

    google.maps.event.addListener(map, 'click', function() {
      infoWindow.close();
    });

    displayMarkers();
    // End


  }

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



  function displayMarkers() {
    // marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, [], {
      imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
    });
    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < markersData.length; i++) {

      var latlng = new google.maps.LatLng(markersData[i].lat, markersData[i].lng);
      var name = markersData[i].name;
      var address1 = markersData[i].address1;
      var address2 = markersData[i].address2;
      var address3 = markersData[i].address3;
      var address4 = markersData[i].address4;
      var image = markersData[i].ikona;
      var wwwsite = markersData[i].wwwsite;

      markerCluster.addMarker(createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite));

      bounds.extend(latlng);
    }

    map.fitBounds(bounds);
  }

  function createMarker(latlng, name, address1, address2, address3, address4, image, wwwsite) {
    var marker = new google.maps.Marker({
      map: map,
      position: latlng,
      title: name,
      // icon: image - so shows default icon in code snippet
    });

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

      var iwContent = '<div id="iw_container">' +
        '<div class="iw_title">' + name + '</div>' +
        '<div class="iw_content">' + address1 + '<br />' +
        address2 + '<br />' + address3 + '<br />' + address4 + '<br />' +
        wwwsite + '</div></div>';


      infoWindow.setContent(iwContent);


      infoWindow.open(map, marker);
    });
    return marker;
  }
</script>

<!--  markerclusterer script  -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<!--  End  -->

<h2 class="przeg">Map:</h2>
<div id="map-canvas" style="width:100%;height:80%;"> </div>
...