1

マーカーとマーカークラスターを含む地図のスクリーンショット

json 応答からピンまたはマーカーの詳細を取得しています。必要なのは、クラスター化された特定のマーカーの詳細を取得することです。

たとえば、スクリーンショットから、3 つのマーカー カウントを持つクラスタラーを考えてみましょう。現在、配列の先頭から 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);

    });


}
4

1 に答える 1

2

データをマーカー オブジェクトに追加しました。その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;


       }
于 2013-10-23T03:44:39.013 に答える