Google地图会在群集中显示标记

时间:2015-08-17 12:44:10

标签: google-maps google-maps-api-3 marker markerclusterer

是否可以缩放到标记,如果它在标记簇内?如果用户将鼠标悬停在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);

1 个答案:

答案 0 :(得分:1)

群集不会改变颜色(但是?)。但我确实有代码可以检测客户端是否悬停在群集内的标记上。所以,现在它在你的屏幕上记录一条消息。

查看我加载的脚本。 Google Maps,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>