1
Можно ли увеличить масштаб до маркера, если он находится внутри кластера маркеров? Я изменяю цвет маркеров, если пользователь наводит курсор на html div. Но если маркер находится внутри кластера, цвет не изменится, так как сам маркер не отображается. Может ли кто-нибудь предоставить мне возможные способы решения этой проблемы?Маркер отображения карт Google в кластере
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);
Как выглядит ваш код до сих пор? – duncan
отредактировал вопрос. @duncan – Tibor
Есть ли у вас какие-либо предложения, что вы хотите? Изменить цвет кластера? заставить маркер появляться/исчезать? ... –