Google 地图标记聚类不起作用

Question

我对这个 http://libris.houston-1.hybridmedia.be/nl/het-project/ 上的标记聚类有疑问（gmap 在底部）。

我已经包含了 markerclusterer.js 文件并通过以下方式集成了集群：

var mc = new MarkerClusterer(map);

未压缩的 JS 文件可以在这里找到： http://libris.houston-1.hybridmedia.be/wp-content/themes/bb-theme-child/dist/assets/js/app.js?ver=4.9.8

我做错了什么？这可能是我初始化集群时的顺序吗？

谢谢

Answer 1

将数组中的所有标记推送到 loadMarkers 方法中后，您并未调用 MarkerCluster api。您需要在 jquery.each 循环后调用 MasterCluster.addMarkers(markers)。

您还需要在第 12 行存储 MasterCluster 实例的引用。 app.js 中的 99 并将其传递给 loadMarker 方法，以便可以在其上调用 addMarkers api。

Answer 2

首先在第 100 行初始化后，将 MarkerCluster 的实例存储在如下变量中。

var mc = new MarkerCluster(map);

在下一行调用 loadMarkers() 时，按如下方式传递此变量：-

loadMarkers(mc);

接受loadMarkers函数中的参数如下：--

function loadMarkers(markerCluster) { // this markerCluster would be used on last line of this function as shown below.

在jquery foreach循环后的loadMarkers函数中，写下一行：-

markerCluster.addMarkers(markers);

Answer 3

markerCluster最好在加载完marker后声明初始化

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

Answer 4

你搞砸了所有的代码。你没有实施我建议的。如果您没有修改任何其他内容，只需将整个文件 app.js 替换为以下代码即可。我已经修改了代码并在下面添加了完整的文件。

var map;
var markers = [];

/* KAART FILTER */

// Klik op de input opvangen
jQuery(function () {
    jQuery('input[name=filter]').change(function () {
      var filterklikid = jQuery(this).attr('id');
      MarkersFilter(filterklikid);
  });
});

// Marker tonen of verbergen aan de hand van de staat van de input
function MarkersFilter(category){
   if (document.getElementById(category).checked===false) { // Verberg de marker
      for (var i=0;i<markers.length;i++) {
         if (markers[i].properties==category)  {
            markers[i].setVisible(false);
         }
      }
   } else { // Toon de marker
      for (var i=0;i<markers.length;i++) {
         if (markers[i].properties==category)  {
            markers[i].setVisible(true);
         }
      }
   }
}

/* EINDE KAART FILTER */

/* ICONEN VOOR VERSCHILLENDE TYPES */

var iconBase = '/mapshapes/';
        var icons = {
          scholen: {
            icon :{
              url: iconBase + 'scholen_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          handel: {
            icon: {
              url: iconBase + 'handel_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          cultuur: {
            icon:{
              url: iconBase + 'cultuur_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          gezondheid: {
            icon:{
              url : iconBase + 'gezondheid_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          sport: {
            icon:{
              url: iconBase + 'sport_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          veiligheid: {
            icon:{
              url: iconBase + 'veiligheid_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          horeca: {
            icon:{
              url: iconBase + 'horeca_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          openbaarvervoer: {
            icon:{
              url: iconBase + 'openbaarvervoer_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          libris: {
            icon:{
              url: iconBase + 'libris.png',
              scaledSize: new google.maps.Size(70, 70),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          }
        };

function loadMarkers(map) {

  var infoWindow = new google.maps.InfoWindow();
  geojson_url = '/project.geojson';

  jQuery.getJSON(geojson_url, function(result) {
      data = result['locations'];
      jQuery.each(data, function(key, val) {
        var point = new google.maps.LatLng(parseFloat(val['geometry']['coordinates'][0]), parseFloat(val['geometry']['coordinates'][1]));
        var titleText = val['properties']['name'];    
        var address = val['geometry']['address'];
        var marker = new google.maps.Marker({
           position: point,
           title: titleText,
           icon: icons[val['type']].icon,
           map: map,
           properties: val['type']
        });
        mc.addMarkers(markers);
        var markerInfo = "<div><h3>" + titleText + "</h3> " + address + "</div>";
        marker.addListener('click', function() {
          infoWindow.close();
          infoWindow.setContent(markerInfo);
          infoWindow.open(map, marker);
        });
        markers.push(marker);
      });
      var Marker = new MarkerCluster(map, markers, {imagePath: 'http://localhost/libris/mapshapes/'});
  });
}

/* MAP AANMAKEN */
function initMap() {
    map_options = {
      zoom: 16,
      center: {lat: 50.808757, lng: 4.314472},
      styles: [
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#46bcec"
            },
            {
                "visibility": "on"
            }
        ]
    }
]
    }


    map_document = document.getElementById('projectmap');
    map = new google.maps.Map(map_document,map_options);
    loadMarkers(map);
}

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

Answer 5

我在您的网站上测试了以下代码并且有效。您可以将 app.js 代码替换为以下代码。

var map;
var markers = [];

/* KAART FILTER */

// Klik op de input opvangen
jQuery(function () {
    jQuery('input[name=filter]').change(function () {
      var filterklikid = jQuery(this).attr('id');
      MarkersFilter(filterklikid);
  });
});

// Marker tonen of verbergen aan de hand van de staat van de input
function MarkersFilter(category){
   if (document.getElementById(category).checked===false) { // Verberg de marker
      for (var i=0;i<markers.length;i++) {
         if (markers[i].properties==category)  {
            markers[i].setVisible(false);
         }
      }
   } else { // Toon de marker
      for (var i=0;i<markers.length;i++) {
         if (markers[i].properties==category)  {
            markers[i].setVisible(true);
         }
      }
   }
}

/* EINDE KAART FILTER */

/* ICONEN VOOR VERSCHILLENDE TYPES */

var iconBase = '/mapshapes/';
        var icons = {
          scholen: {
            icon :{
              url: iconBase + 'scholen_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          handel: {
            icon: {
              url: iconBase + 'handel_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          cultuur: {
            icon:{
              url: iconBase + 'cultuur_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          gezondheid: {
            icon:{
              url : iconBase + 'gezondheid_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          sport: {
            icon:{
              url: iconBase + 'sport_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          veiligheid: {
            icon:{
              url: iconBase + 'veiligheid_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          horeca: {
            icon:{
              url: iconBase + 'horeca_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          openbaarvervoer: {
            icon:{
              url: iconBase + 'openbaarvervoer_maps.svg',
              scaledSize: new google.maps.Size(35, 35),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          },
          libris: {
            icon:{
              url: iconBase + 'libris.png',
              scaledSize: new google.maps.Size(70, 70),
              origin: new google.maps.Point(0,0),
              anchor: new google.maps.Point(0, 0)
            }
          }
        };

function loadMarkers(map) {

  var infoWindow = new google.maps.InfoWindow();
  geojson_url = '/project.geojson';

  jQuery.getJSON(geojson_url, function(result) {
      data = result['locations'];
      jQuery.each(data, function(key, val) {
        var point = new google.maps.LatLng(parseFloat(val['geometry']['coordinates'][0]), parseFloat(val['geometry']['coordinates'][1]));
        var titleText = val['properties']['name'];    
        var address = val['geometry']['address'];
        var marker = new google.maps.Marker({
           position: point,
           title: titleText,
           icon: icons[val['type']].icon,
           map: map,
           properties: val['type']
        });
        var markerInfo = "<div><h3>" + titleText + "</h3> " + address + "</div>";
        marker.addListener('click', function() {
          infoWindow.close();
          infoWindow.setContent(markerInfo);
          infoWindow.open(map, marker);
        });
        markers.push(marker);
      });
      var Marker = new MarkerClusterer(map, markers, {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
      Marker.addMarkers(markers);

  });
}

/* MAP AANMAKEN */
function initMap() {
    map_options = {
      zoom: 16,
      center: {lat: 50.808757, lng: 4.314472},
      styles: [
    {
        "featureType": "administrative",
        "elementType": "labels.text.fill",
        "stylers": [
            {
                "color": "#444444"
            }
        ]
    },
    {
        "featureType": "landscape",
        "elementType": "all",
        "stylers": [
            {
                "color": "#f2f2f2"
            }
        ]
    },
    {
        "featureType": "poi",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "road",
        "elementType": "all",
        "stylers": [
            {
                "saturation": -100
            },
            {
                "lightness": 45
            }
        ]
    },
    {
        "featureType": "road.highway",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "simplified"
            }
        ]
    },
    {
        "featureType": "road.arterial",
        "elementType": "labels.icon",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "transit",
        "elementType": "all",
        "stylers": [
            {
                "visibility": "off"
            }
        ]
    },
    {
        "featureType": "water",
        "elementType": "all",
        "stylers": [
            {
                "color": "#46bcec"
            },
            {
                "visibility": "on"
            }
        ]
    }
]
    }


    map_document = document.getElementById('projectmap');
    map = new google.maps.Map(map_document,map_options);
    loadMarkers(map);
}

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

Google 地图标记聚类不起作用

Google Maps marker clustering doesn't work

javascript

google-maps

cluster-computing