集群上的 Google 地图信息窗口

Question

我有一张带有很多标记的地图。所有这些标记都有一个信息窗口。 使用 Markers Cluster Lib (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js)，我得到了单击时会放大的集群。
一些标记具有完全相同的坐标，因此即使我达到最大缩放，它们也会变成一个簇。到目前为止一切都很好，除了我想在单击集群时打开一个信息窗口，该集群在缩放时不会分裂成标记。在这个 InfoWindow 中，我想根据它包含的标记显示信息。

到目前为止，这是我的代码。它适用于标记上的 InfoWindow，但单击 Clusters 时它不显示 InfoWindow。

function initialize(lat, lng) {
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 14,
      maxZonn:15
   };

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

    google.maps.event.addListener(map, 'idle', function() {
        getMarkers(map.getBounds());  

    });

};

function getMarkers(bounds){
    var filter = build_filter();
    var bounds  = {
        'swlat':bounds.getSouthWest().lat(),
        'swlng':bounds.getSouthWest().lng(),
        'nelat':bounds.getNorthEast().lat(),
        'nelng':bounds.getNorthEast().lng()
    };

    data = {
        'bounds': bounds
    }


 $.ajax({
    type: "POST",
    dataType: 'json',
    async: false,
    url: "<?=$x_url;?>",
    data: data,
    cache: true,
    success: function (json) {
        addMarkers2Map(json);

    }
    });
}    


function addMarkers2Map(data){

    $('#properties_counter').html(data.length);
    var markers = []; 
    for (var i = 0; i < data.length; ++i) {
        // set the marker position
        var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        console.log(data[i].lat);


        // drop the marker
        var marker = new MarkerWithLabel({
            position: latLng,
            map: map,
            labelContent: data[i].price,
            labelAnchor: new google.maps.Point(27, 35),
            title: data[i].title,
            labelClass: "map-markers",
            zIndex: i
            // icon: ' '

        });

        markers.push(marker);

        var infowindow = null;
        buildInfoWindow(marker,map,data[i], i);

    }

    var markerCluster = new MarkerClusterer(map, markers);

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

            infowindow.open(map,markerCluster);

    });
}

function buildInfoWindow(marker, map, data, index){
    var strVar="";
    strVar += "<img src=\""+data.main_photo+"\"><br>";
    strVar += data.name+"<\/i>&nbsp;|&nbsp;"+data.age+"&nbsp;<i class=\"fa fa-prp\"><\/i>&nbsp;|&nbsp;"+data.gender+"&nbsp;<i class=\"fa fa-check\"><\/i>";
    strVar += "<div class=\"avatar-list\">";
    strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><\/a>";
    strVar += "<\/div>";
    strVar += "<div class=\"adress2\">"+data.city+"<\/div>";
    strVar += "<\/a>";

    var infowindow = new google.maps.InfoWindow({
        content: strVar
         });

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

我怎样才能做到这一点？

Answer 1

向 MarkerClusterer 添加一个“clusterclick”侦听器，触发该事件时打开信息窗口。

proof of concept fiddle

代码 sn-p：

var gm_map;
var markerArray = [];
var infoWindow = new google.maps.InfoWindow();

function initialize() {
  var marker, i;

  var options_googlemaps = {
    minZoom: 4,
    zoom: 18,
    center: new google.maps.LatLng(59.328631, 13.485688),
    maxZoom: 18,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }

  gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);


  var options_markerclusterer = {
    gridSize: 20,
    maxZoom: 18,
    zoomOnClick: false,
    imagePath:  'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
  };



  var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);

  google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {

    var markers = cluster.getMarkers();

    var array = [];
    var num = 0;

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

      num++;
      array.push(markers[i].getTitle() + '<br>');
    }
    if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
      infoWindow.setContent(markers.length + " markers<br>" + array);
      infoWindow.setPosition(cluster.getCenter());
      infoWindow.open(gm_map);
    }
  });

  for (i = 0; i < clusterMarkers.length; i++) {
    var marker = clusterMarkers[i];

    google.maps.event.addListener(marker, 'click', (function(marker) {
      return function() {
        infoWindow.setContent(this.getTitle());
        infoWindow.open(gm_map, this);
      }
    })(marker));
  }
}

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

var clusterMarkers = [
  new google.maps.Marker({
    position: new google.maps.LatLng(59.381059, 13.504026),
    map: gm_map,
    title: "P1220214 1.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.338683, 13.492057),
    map: gm_map,
    title: "P1220214 2.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.340715, 13.49631),
    map: gm_map,
    title: "P1220214 3.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.327232, 13.487384),
    map: gm_map,
    title: "P1220214 4.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.379034, 13.516566),
    map: gm_map,
    title: "P1220214 5.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.328631, 13.485688),
    map: gm_map,
    title: "P1220214 6.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.328657, 13.485591),
    map: gm_map,
    title: "P1220214 7.JPG"
  }),

  new google.maps.Marker({
    position: new google.maps.LatLng(59.328501, 13.485782),
    map: gm_map,
    title: "P1220214 8.JPG"
  })
]

.photo-map {
  background-color: #222222;
  height: 500px;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<div class="photo-map" id="google-maps"></div>

Answer 2

我最终以这种方式解决了这个问题，添加了以下代码：

var clusterOptions = {
    zoomOnClick: false
}

markerCluster = new MarkerClusterer(map, markers, clusterOptions);

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
if (map.getZoom() < map.maxZoom ){

    map.setCenter(cluster.center_);

    map.setZoom(map.getZoom() + 2);
} else {

    var content = '';
    // Convert the coordinates to an MVCObject
    var info = new google.maps.MVCObject;
    info.set('position', cluster.center_);
    //Get markers
    var marks_in_cluster = cluster.getMarkers();

    console.log(marks_in_cluster);

    for (var z = 0; z < marks_in_cluster.length; z++) {
        content = makeClusterInfo(marks_in_cluster,z); 
    }

    infowindow.close(); // closes previous open ifowindows
    infowindow.setContent(content); 
    infowindow.open(map, info);
    google.maps.event.addListener(map, 'zoom_changed', function() {
        infowindow.close()
    });
    } 
});