我在Ruby on Rails应用程序中使用 Google Maps Javascript v3 API 和 MarkerClusterer JS 。
我想在地图中使用以下功能。我在地图上有一些标记,当我缩小地图时地图标记形成一个簇,当我放大时再次分离。当我点击特定标记时,它会显示该标记的信息窗口,并且当我点击群集时,它会显示与该群集相关的信息窗口。这是我的地图的当前行为。
现在,当我点击地图上的特定标记时,它会显示该标记的信息窗口,现在我将其缩小,当标记成为群集的一部分时,该标记的信息窗口将被隐藏,我希望该信息窗口仍然显示在群集上。
我正在使用标记和群集的全局信息窗口。 这是在我的应用程序中处理map的一些代码。
function createMarker(latlng, name, html) {
// create new google marker using the latitude and longitude that is passed into this function as "latlng"
var marker = new google.maps.Marker({
position: latlng,
draggable: true ,
map: map,
zIndex: Math.round(latlng.lat()*-100000)<<5,
icon: '/assets/pin.png',
});
// add click event listner to the created marker
google.maps.event.addListener(marker, 'click', function() {
// clear the previous content of infowindow
infowindow.setContent('');;
// close the infowindow
infowindow.close();
// set the content of infowindow that is passed into this function as "html"
infowindow.setContent(html);
// open the new infowindow with the created marker
infowindow.open(map,marker);
clearUpMenus();
});
// add closeclick event listner when user clicks on the close button on the infowindow
google.maps.event.addListener(infowindow,'closeclick',function(){
// set the map of the marker to null
marker.setMap(null);
check = null;
});
// add drag event listner when user drags the created marker
google.maps.event.addListener(marker,'dragend',function(event) {
// update latitude and longitude of the marker with the dragged ones.
var lat = event.latLng.lat();
var lng = event.latLng.lng();
// set latitude and longitude to the input fields for further uses.
form_latitude = lat;
form_longitude = lng;
$("input[id=location_latitude]").val(lat);
$("input[id=location_longitude]").val(lng);
});
// trigger the click event manually
google.maps.event.trigger(marker, 'click');
// return the created marker
return marker;
}
以上是在我的地图上创建新标记的代码。
var markerCluster = new MarkerClusterer(map,markersArray, clusterOptions);
google.maps.event.addListener(markerCluster, 'click', function(cluster) {
// this function displays the info-window on cluster
displayClusterInfo(cluster);
});
function displayClusterInfo(cluster) {
var markers = cluster.getMarkers();
$('.map-title').css('z-index',-1);
map.setOptions({zoomControl:false, streetViewControl:false});
var info = new google.maps.MVCObject;
info.set('position', cluster.getCenter());
//getTopThreeMarkers() - It makes the ajax call to get top markers based on some criteria
getTopThreeMarkers(info,markers);
}
任何帮助将不胜感激。 谢谢。