Google 地图聚类

Question

您好，我正在为我的分类广告网站制作地图视图，但我在向地图添加聚类功能时遇到了问题。我想知道是否有人可以帮助我并就如何编辑我的代码以使集群适用于我网站上的所有广告提供一些建议，因为现在它会相应地显示我的所有广告，但它不会当我出于某种原因添加集群代码时将它们集群，我有点新手所以我显然输入了错误的代码。任何帮助将不胜感激。提前致谢。

这是我的代码：

    $(document).ready(function() {


    var markersInfo = $('.ia-card').map(function() {

            var info = {
                id: $(this).data('map-id'),
                address: $(this).data('map-address'),
                title: $(this).data('map-title'),
                price: $(this).data('map-price'),
                latitude: $(this).data('map-latitude'),
                longitude: $(this).data('map-longitude'),
                html: "<img src=" + $(this).data('map-image') + ">",
                link: $(this).data("map-link"),
        contentHtml:  "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + $(this).data('map-price') + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
            };

        return info;
    }).get();


        initGoogleMap(markersInfo);




// GMAP ON SEARCH RESULTS PAGE
function initGoogleMap(markersInfo) {

    var mapOptions = {
        // zoom: 2,
        // center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
    },
    bounds = new google.maps.LatLngBounds(),
    mapElement = document.getElementById('map-canvas'),
    map = new google.maps.Map(mapElement, mapOptions);
    var geocoder = new google.maps.Geocoder();



    $.each(markersInfo, function(key, val) {
        var marker = new google.maps.Marker({
            map: map,
            position: {lat: parseFloat(val.latitude), lng: parseFloat(val.longitude)},
            title: val.title,
            info: new google.maps.InfoWindow({
                content: val.contentHtml
            })

        });


        google.maps.event.addListener(marker, 'click', function() {
            marker.info.open(map, marker);
        });


        loc = new google.maps.LatLng(val.latitude, val.longitude);
            bounds.extend(loc);
    });


    map.fitBounds(bounds);
    map.panToBounds(bounds);

    var markerCluster = new MarkerClusterer(map, markersInfo, {
        zoomOnClick: true,
        gridSize: 40,
        maxZoom: 15,
        imagePath: 'images/m',
        minimumClusterSize: 2
        });

};


});

Answer 1

好吧，当将标记列表传递给 MarkerClusterer 时，您需要将其作为实际 google 标记的数组传递。

因此您需要将标记（不是它们的信息，而是实际标记）存储在一个数组中并将其传递。

您也不应该设置每个标记的 map 属性，因为它会直接将其添加到地图，而您希望 MarkerClusterer 来处理它。

$(document).ready(function() {

  var markersInfo = $('.ia-card').map(function() {

    var info = {
      id: $(this).data('map-id'),
      address: $(this).data('map-address'),
      title: $(this).data('map-title'),
      price: $(this).data('map-price'),
      latitude: $(this).data('map-latitude'),
      longitude: $(this).data('map-longitude'),
      html: "<img src=" + $(this).data('map-image') + ">",
      link: $(this).data("map-link"),
      contentHtml: "<div class='image'>" + "<img src=" + $(this).data('map-image') + ">" + "</div>" + '<b>' + $(this).data('map-title') + '</b><br>' + $(this).data('map-price') + "<br><a href='" + $(this).data("map-link") + "'>More>></a>"
    };

    return info;
  }).get();

  initGoogleMap(markersInfo);

  // GMAP ON SEARCH RESULTS PAGE
  function initGoogleMap(markersInfo) {

    var mapOptions = {
        // zoom: 2,
        // center: new google.maps.LatLng(53.334430, -7.736673) // center of Ireland
      },
      bounds = new google.maps.LatLngBounds(),
      mapElement = document.getElementById('map-canvas'),
      map = new google.maps.Map(mapElement, mapOptions),
      markerList = []; // create an array to hold the markers

    var geocoder = new google.maps.Geocoder();

    $.each(markersInfo, function(key, val) {
      var marker = new google.maps.Marker({
        /*map: map,*/ // do not set the map on each marker
        position: {
          lat: parseFloat(val.latitude),
          lng: parseFloat(val.longitude)
        },
        title: val.title,
        info: new google.maps.InfoWindow({
          content: val.contentHtml
        });
      });

      markerList.push(marker); // add the marker to the list

      google.maps.event.addListener(marker, 'click', function() {
        marker.info.open(map, marker);
      });

      loc = new google.maps.LatLng(val.latitude, val.longitude);
      bounds.extend(loc);
    });

    map.fitBounds(bounds);
    map.panToBounds(bounds);

    var markerCluster = new MarkerClusterer(map, markerList, {
      zoomOnClick: true,
      gridSize: 40,
      maxZoom: 15,
      imagePath: 'images/m',
      minimumClusterSize: 2
    });
  };
});

Google 地图聚类

Google Maps Clustering

google-maps

google-maps-api-3

markerclusterer