Я добавил MarkerClusterer в свой скрипт Google Maps V3. Работает нормально, однако у меня есть несколько маркеров с одинаковой широтой и длиной. MarkerClusterer не распознает это, и при уменьшении до максимального уровня масштабирования он размещает один маркер над другим, поэтому я могу просматривать только один из них. Чтобы решить эту проблему, я использую дополнительный скрипт (oms), который позволяет расширять группу маркеров с одинаковой широтой по клику. Вот запутанная часть;
В тот момент, когда я нажимаю на последний отдельный маркер, дополнительный скрипт расширяет все одинаковые маркеры, но мне нужно, чтобы это было запущено за 1 шаг до этого, когда идентичные маркеры находятся в кластере. Можно ли это сделать в MarkerClusterer/кто-нибудь знает альтернативу этому?
Заранее большое спасибо.
JS ниже:
function indexLoad() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(43, 15),
zoom: 1,
mapTypeId: 'roadmap'
});
var infoBox;
var oms = new OverlappingMarkerSpiderfier(map);
// Change this depending on the name of your PHP file
downloadUrl("/jofli/journals/xml/public", function(data) {
var xml = data.responseXML;
var markerArray = [];
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<section class='mapJournalInfo'> <b>" + name + "</b> <br/> <br/> " + address + "<br/> <br/>" + "<aside class='mapPhoto'> Photo 1 </aside>" + "<br/> <br/> <br/> <a class='mapLink' href='#'> See More </a> </section>";
var icon = customIcons[type] || {};
var image = new google.maps.MarkerImage(
'http://i.imgur.com/iNKorgI.png',
new google.maps.Size(50,59), // size of the image
new google.maps.Point(0,0) // origin, in this case top-left corner
// new google.maps.Point(9, 25) // anchor, i.e. the point half-way along the bottom of the image
);
var marker = new google.maps.Marker({
map: map,
position: point,
icon: image,
shadow: icon.shadow
});
markerArray.push(marker);
oms.addMarker(marker);
infobox = new InfoBox({
disableAutoPan: false,
maxWidth: 150,
pixelOffset: new google.maps.Size(-150, -20),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 0.75,
width: "350px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1)
});
infobox.setContent(html);
google.maps.event.addListener(marker, 'click', function() {
infobox.open(map, this);
map.panTo(point);
});
// at the moment, this is the click for the max level zoom (small bear)
// this needs to be 1 step BEFORE that (last cluster level)
// when there are <1 markers that are of the same lat long
oms.addListener('click', function(marker) {
infobox.setContent(html);
infobox.open(map, marker);
});
////////////////////////////////////////////////////////////////////////////
}
var clusterStyles = [
{
opt_textColor: '#e04343',
textColor: 'red',
url: 'http://i.imgur.com/UUg1nM4.png',
height: 71,
width: 49
}
];
var mcOptions = {
styles: clusterStyles,
streetViewControl: true,
maxZoom:13,
};
var markerCluster = new MarkerClusterer(map, markerArray, mcOptions);
});
}