Google 地图显示集群内的标记

Question

是否可以缩放到位于标记簇内的标记？如果用户将鼠标悬停在 html div 上，我将更改标记的颜色。但是如果标记在一个簇内，颜色不会改变，因为标记本身没有显示。谁能给我提供解决这个问题的可能方法？

  var allMarkers = [];
  (function($) {
      "use strict";

      // Custom options for map
      var options = {
          zoom: 12,
          mapTypeId: 'Styled',
          disableDefaultUI: true,
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          mapTypeControlOptions: {

              mapTypeIds: ['Styled']
          }
      };
      var styles = [{
          stylers: [{
              hue: "#cccccc"
          }, {
              saturation: -100
          }]
      }, {
          featureType: "road",
          elementType: "geometry",
          stylers: [{
              lightness: 100
          }, {
              visibility: "simplified"
          }]
      }, {
          featureType: "road",
          elementType: "labels",
          stylers: [{
              visibility: "on"
          }]
      }, {
          featureType: "poi",
          stylers: [{
              visibility: "off"
          }]
      }];

      var newMarker = null;
      var markers = [];

      // json for properties markers on map

      var props = < ? php echo json_encode($map_flats); ? > ;


      // custom infowindow object
      var infobox = new InfoBox({
          disableAutoPan: false,
          maxWidth: 202,
          pixelOffset: new google.maps.Size(-101, -285),
          zIndex: null,
          boxStyle: {
              background: "url('images/infobox-bg.png') no-repeat",
              opacity: 1,
              width: "202px",
              height: "245px"
          },
          closeBoxMargin: "28px 26px 0px 0px",
          closeBoxURL: "",
          infoBoxClearance: new google.maps.Size(1, 1),
          pane: "floatPane",
          enableEventPropagation: false
      });

      // function that adds the markers on ma

      var addMarkers = function(props, map) {
              $.each(props, function(i, prop) {
                  var latlng = new google.maps.LatLng(prop.position.lat, prop.position.lng);
                  var marker = new google.maps.Marker({
                      position: latlng,
                      map: map,
                      id: +prop.id,
                      icon: new google.maps.MarkerImage(
                          'images/' + prop.markerIcon,
                          null,
                          null,
                          null
                      ),
                      draggable: false,
                      animation: google.maps.Animation.DROP,

                  });


                  var bounds = new google.maps.LatLngBounds();
                  for (i = 0; i < markers.length; i++) {
                      bounds.extend(markers[i].getPosition());
                  }

                  map.fitBounds(bounds);
                  allMarkers.push(marker); //Add it to allMarkers


                  var infoboxContent = '<div class="infoW">' +
                      '<div class="propImg">' +
                      '<img src="uploads/' + prop.image + '">' +
                      '<div class="propBg">' +

                      '</div>' +
                      '</div>' +
                      '<div class="paWrapper">' +
                      '<div class="propTitle">€' + prop.title + '</div>' +
                      '<div class="propAddress">' + prop.address + '</div>' +
                      '</div><br>' +
                      '<ul class="propFeat">' +
                      '<li><span class="fa fa-moon-o"></span> ' + prop.bedrooms + ' room(s)</li>' +

                      '<li><span class="icon-frame"></span> ' + prop.area + ' m<sup>2</sup></li>' +
                      '</ul>' +
                      '<div class="clearfix"></div>' +
                      '<div class="infoButtons">' +
                      '<a class="btn btn-sm btn-round btn-gray btn-o closeInfo">Close</a>' +
                      '<a target="_blank" href="single.php?id=' + prop.id + '" class="btn btn-sm btn-round btn-green viewInfo">View</a>' +
                      '</div>' +
                      '</div>';

                  google.maps.event.addListener(marker, 'click', (function(marker, i) {
                      return function() {
                          infobox.setContent(infoboxContent);
                          infobox.open(map, marker);
                      }

                  })(marker, i));

                  google.maps.event.addListener(map, "click", function(event) {
                      infobox.close();
                  });
                  $(document).on('click', '.closeInfo', function() {
                      infobox.open(null, null);
                  });

                  markers.push(marker);
              });
              //set style options for marker clusters (these are the default styles)
              var mcOptions = {
                  styles: [{
                      height: 53,
                      url: "images/m1.png",
                      width: 53
                  }, {
                      height: 54,
                      url: "images/m1.png",
                      width: 54
                  }, {
                      height: 66,
                      url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
                      width: 66
                  }, {
                      height: 78,
                      url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
                      width: 78
                  }, {
                      height: 90,
                      url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
                      width: 90
                  }],
                  gridSize: 50,
                  maxZoom: 14
              }

              //init clusterer with your options
              var mc = new MarkerClusterer(map, markers, mcOptions);

Answer 1

Cluster 没有改变颜色（还是？）。但是我确实有代码可以检测客户端是否将鼠标悬停在集群内的标记上。所以，现在它会在您的屏幕上记录一条消息。

看看我加载的脚本。 Google 地图、MarkerClustererPlus 和包含数据的脚本。许多地点（照片）。

所以，客户的标记，是美国纽约中央公园的标记。试试吧。

还有其他关于如何可视化检测的想法吗？就像在集群周围添加一个圆圈，...？

<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://googlemaps.github.io/js-marker-clusterer/examples/data.json"></script>
<script>

  var client_index = 821;  // Central Park, New York. Item 821 ( "photo_id": 586159 )
  // We run through all the marker-objects inside the cluster; and we see if the marker object of our client marker is inside that array
  function clientMarkerInCluster(allMarkers, markersInCluster) {
    if(markersInCluster.indexOf( allMarkers[client_index] ) > 0) {
      return true;
    }
    return false;
  }

  function initialize() {
    var center = new google.maps.LatLng(40.480467417349345,-98.80444335937501);
    var options = {
      'zoom': 4,
      'center': center,
      'mapTypeId': google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), options);
    var markers = []; 
    for(var key in data.photos) {
      markers.push(new google.maps.Marker({
          position: new google.maps.LatLng(data.photos[key].latitude, data.photos[key].longitude),
          map: map,
          title: key +' '+ data.photos[key].photo_title
        })
      );
    }

    var mcOptions = {gridSize: 50, maxZoom: 15};
    var mc = new MarkerClusterer(map, markers, mcOptions);
    google.maps.event.addListener(mc, "mouseover", function (c) {
      if(clientMarkerInCluster(markers, c.markers_)) {
        log('Client marker is inside the cluster');
      }
    });
    // google.maps.event.addListener(mc, "mouseout", function (c) {});
  }
  google.maps.event.addDomListener(window, 'load', initialize);

  // just a function to show a log on screen 
  function log(h) {
    document.getElementById("log").innerHTML += h + "<br>";
  }
</script>
<style>
#map {
  height: 400px;
}
</style>
<div id="map"></div>
<div id="log"></div>

Google 地图显示集群内的标记

Google Maps show marker inside a cluster

google-maps

google-maps-api-3

marker

markerclusterer