Google Map V3：markerCluster onclick以一种信息框列表样式显示群集内标记的所有信息框。

Question

从json响应中检索pin或marker详细信息，我需要的是检索聚类的特定标记详细信息，

例如，从截图中考虑具有3个标记计数的聚类器，现在我只能从数组的开头检索3个标记细节，我需要检索聚类的特定三个标记细节。

以下方法用于检索和显示infoWindow中的标记细节，

    function displayClusterInfo(cluster,info,pins,infowindow)
{
var text="";

var markers = cluster.getMarkers();

   for(var i=0; i<markers.length; i++)
       {
        text += "" + pins[i].Date + "</br>" + "<b>Fire Type : </b>" + pins[i].Inc_Code_descr + "</br>";


       }



    infowindow.close(map, info);
    infowindow.setContent(text); //set infowindow content
    infowindow.open(map, info);
 }

标记和群集上的鼠标事件操作由以下代码执行：

function displayPins(pins) {
infowindow = new google.maps.InfoWindow({
    content: "holding..."
});
var markers = [];
var boxList = [];
var pinList = [];


latLng = [];
$.each(pins, function(i, pin) {

    var pinText = document.createElement("div");
    pinText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    pinText.innerHTML = "" + pin.Date + "</br>" + "<b>Fire Type : </b>" + pin.Inc_Code_descr + "</br>";
    var pinOptions = {
        content: pinText,
        boxStyle: {
            opacity: 0.75,
            width: "220px"
        },
        enableEventPropagation: false,
        closeBoxMargin: "12px 4px 2px 2px"
    };
    var ip = new InfoBox(pinOptions);
    pinList.push(ip);



    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = "" + pin.Date + "</br>" + pin.Address + "</br><b>Incident No : </b><a class=no_image href=./info/?id=" + pin.Div_id + ">" + pin.Incident_no + "</a><br/>" + "</br><b>Fire Type : </b>" + pin.Inc_Code_descr + "</br><b>Casuality : </b>" + pin.Casualty + "</br><b>Property Damage : </b>" + pin.Prop_loss + "</br><b>Fire cause : </b>" + pin.Cause_Code_descr + "</br><b>GRANULARITY: </b>" + pin.granularity + "</br><b>COLOUR: </b>" + pin.colour + "</br><b><p class='red'>CONFIDENCES: </b>" + pin.confidence + "'</P>";
    var myOptions = {
        content: boxText,
        boxStyle: {
            opacity: 0.75,
            width: "280px"
        },
        enableEventPropagation: false,
        closeBoxMargin: "12px 4px 2px 2px"
    };
    latLng = new google.maps.LatLng(pin.Latitude, pin.Longitude);
    var marker = new google.maps.Marker({'position': latLng
                , map: map,
        draggable: true,
        optimized: false,
        visible: true});
    markers.push(marker);
    var ib = new InfoBox(myOptions);
    boxList.push(ib);

    google.maps.event.addListener(marker, 'mouseover', function(markers, i) {
        return function() {
            hoverInfoBox = pinList[i];
            if (clickInfoBox) {
                if ((clickInfoBox.getMap()) == null)
                {
                    clickInfoBox = null;
                    hoverInfoBox.open(map, this);
                } else
                {
                    console.log(" Click infobox not closed");
                }



            } else
            {

                clickInfoBox = null;
                hoverInfoBox.open(map, this);
            }

        }
    }(markers, i));
    google.maps.event.addListener(marker, 'click', function(boxList, i) {
        return function() {
            if (clickInfoBox) {
                clickInfoBox.close(map, this);
            }
            clickInfoBox = boxList[i];
            if (clickInfoBox) {
                hoverInfoBox.close(map, this);
                clickInfoBox.open(map, this);
            }

        }
    }(boxList, i));

    google.maps.event.addListener(marker, 'mouseout', function(markers, i) {
        return function() {

            if (clickInfoBox) {

                if ((clickInfoBox.getMap()) == null)
                {

                    hoverInfoBox.close(map, this);
                } else
                {
                    console.log(" Click infobox not closed");
                }

            } else
            {

                hoverInfoBox.close(map, this);
            }

        }
    }(markers, i));
});



var infowindow = new google.maps.InfoWindow();
var clusterOptions = {zoomOnClick: false, styles: [{height: 53, width: 53, url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png"}]}
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);


var infoList = new google.maps.InfoWindow();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {


    var content = '';

displayClusterInfo(cluster,info,pins,infowindow);

    });


}

Answer 1

您已将数据添加到标记对象。所以cluster.getMarker()会给出在该针中聚集的标记。在标记中创建一个属性，并在需要时访问它。

var marker = new google.maps.Marker({'position': latLng
                , map: map,myData: boxText.innnerHtml
        draggable: true,
        optimized: false,
        visible: true});

并在displayClusterInfo方法中

for(var i=0; i<markers.length; i++)
       {
        text += markers[i].myData;


       }