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

我在您的网站上测试了以下代码，并且该代码有效。您可以使用以下代码替换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);

Answer 2

在将所有标记推入loadMarkers方法内的数组后，您没有调用MarkerCluster api。您需要在jquery.each循环后调用MasterCluster.addMarkers（markers）。

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

Answer 3

首先在第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 4

最好在加载标记后声明并初始化markerCluster

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

Answer 5

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

library(data.table)
melt(setDT(testdata, keep.rownames = TRUE), "rn")

Google Maps标记群集不起作用

5 个答案: