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