我的群集地图中有一个信息泡泡。目前，当您点击或将鼠标悬停在信息气泡上时，我的标记会显示信息气泡。我不能让我的星团拥有相同的东西吗？
当您悬停或点击群集时，如何在群集上显示信息气泡？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://blakeloizides.co.za/marker/js/jquery-1.6.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="http://blakeloizides.co.za/marker/js/gmap3.js"></script>
<script type="text/javascript" src="http://blakeloizides.co.za/marker/js/mcdo.js"></script>
<style>
#container{
position:relative;
height:700px;
}
#googleMap{
border: 1px dashed #C0C0C0;
width: 75%;
height: 700px;
}
/* cluster */
.cluster{
color: #FFFFFF;
text-align:center;
font-family: Verdana;
font-size:14px;
font-weight:bold;
text-shadow: 0 0 2px #000;
-moz-text-shadow: 0 0 2px #000;
-webkit-text-shadow: 0 0 2px #000;
}
.cluster-1{
background: url(images/card-cluster.png) no-repeat;
line-height:64px;
width: 64px;
height: 40px;
}
.cluster-2{
background: url(images/house.png) no-repeat;
line-height:53px;
width: 60px;
height: 48px;
}
.cluster-3{
background: url(images/headquarters.png) no-repeat;
line-height:66px;
width: 70px;
height: 56px;
}
/* infobulle */
.infobulle{
overflow: hidden;
cursor: default;
clear: both;
position: relative;
height: 34px;
padding: 0pt;
background-color: rgb(57, 57, 57);
border-radius: 4px 4px;
-moz-border-radius: 4px 4px;
-webkit-border-radius: 4px 4px;
border: 1px solid #2C2C2C;
}
.infobulle .bg{
font-size:1px;
height:16px;
border:0px;
width:100%;
padding: 0px;
margin:0px;
background-color: #5E5E5E;
}
.infobulle .text{
color:#FFFFFF;
font-family: Verdana;
font-size:11px;
font-weight:bold;
line-height:25px;
padding:4px 20px;
text-shadow:0 -1px 0 #000000;
white-space: nowrap;
margin-top: -17px;
}
.infobulle.drive .text{
background: url(images/drive.png) no-repeat 2px center;
padding:4px 20px 4px 36px;
}
.arrow{
position: absolute;
left: 45px;
height: 0pt;
width: 0pt;
margin-left: 0pt;
border-width: 10px 10px 0pt 0pt;
border-color: #2C2C2C transparent transparent;
border-style: solid;
}
</style>
<script type="text/javascript">
$(function(){
$("#googleMap").gmap3({
map:{
options: {
center:[46.578498,2.457275],
zoom: 7,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
},
marker: {
values: macDoList,
cluster:{
radius:100,
// This style will be used for clusters with more than 0 markers
0: {
content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
width: 53,
height: 52
},
// This style will be used for clusters with more than 20 markers
20: {
content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
width: 56,
height: 55
},
// This style will be used for clusters with more than 50 markers
50: {
content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div> + <div>hello</div>",
width: 66,
height: 65
}
},
options: {
icon: new google.maps.MarkerImage("images/card-marker.png")
},
events:{
mouseover: function(marker, event, context){
$(this).gmap3(
{clear:"overlay"},
{
overlay:{
latLng: marker.getPosition(),
options:{
content: "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
"<div class='bg'></div>" +
"<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
"</div>" +
"<div class='arrow'></div>",
offset: {
x:-46,
y:-73
}
}
}
});},
mousedown: function(marker, event, context){
$(this).gmap3(
{clear:"overlay"},
{
overlay:{
latLng: marker.getPosition(),
options:{
content: "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
"<div class='bg'></div>" +
"<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
"</div>" +
"<div class='arrow'></div>",
offset: {
x:-100,
y:-73
}
}
}
});
},
mouseout: function(){
$(this).gmap3({clear:"overlay"});
}
}
}
});
});
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
我一直在尝试以下方法：
mouseover: function(marker, event, context){
$(this).gmap3(
{clear:"overlay"},
{
overlay:{
latLng: marker.getPosition(),
options:{
content: "<div class='infobulle"+(context.data.drive ? " drive" : "")+"'>" +
"<div class='bg'></div>" +
"<div class='text'>" + context.data.city + " (" + context.data.zip + ")</div>" +
"</div>" +
"<div class='arrow'></div>",
offset: {
x:-46,
y:-73
}
}
}
});},
答案 0 :(得分：2)
群集不是标记，它是一组标记。
您可以通过回调的第一个参数访问的群集的属性。 第一个参数由两个成员组成，main和shadow。
使用getPosition() - 成员的方法main来检索群集的位置。
集群的标记作为数组存储在第三个参数的data.markers-member中，您可以从此数组中收集一些信息以在信息块内显示它们。
示例:(将此添加到群集的events成员）
mouseover: function(cluster, event, context){
$(this).gmap3(
{clear:"overlay"},
{
overlay:{
latLng: cluster.main.getPosition(),
options:{
content: "<div class='infobulle'>" +
"<div class='bg'></div>" +
"<div class='text'>there are " +
context.data.markers.length +
" markers in this cluster</div>" +
"</div><div class='arrow'></div>",
offset: {
x:-46,
y:-73
}
}
}
});
}