Google Maps Marker Clusterer：标记永远不会聚集

问题描述 投票：-1回答：1

我不知道为什么标记聚类器不会显示我的标记分组，如下所示：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>
javascript google-maps google-maps-api-3 markerclusterer
1个回答
0
投票

查看the example in the documentation和您的代码，可能最简单的“修复”是在显示标记例程中实例化标记clusterer，然后在创建时将每个标记添加到clusterer：

评论：

  1. 你有一个在你的脚本include（&callback=myMap）中指定的回调，但没有该名称的函数（只需从你的脚本中删除它包括）。在控制台中导致此错误：
"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;
  }

proof of concept fiddle

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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.