0

Google Maps V3 スクリプトに MarkerClusterer を追加しました。正常に動作します - ただし、緯度経度が同じマーカーがいくつかあります - MarkerClusterer はこれを認識せず、最大ズーム レベルまで下げると、1 つのマーカーが他のマーカーの上にスタックされるため、そのうちの 1 つしか表示できません。これを解決するために、同じ緯度経度を持つマーカーのグループをクリックすると展開できるようにする追加のスクリプト (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);

  });



}
4

1 に答える 1

0

私は似たような問題を抱えていました。これを解決できたことがありますか? 答えを見つける鍵は、Google clustermarkerer プラグインの「zoom」属性にあると思いました。

しかし、最終的に属性を持っていたのはmarkerClusterer自体でした

var markerCluster = new MarkerClusterer(map, clusteredMarkers, {gridSize:2});

これを試して、動作するかどうかを確認してください

于 2013-08-06T17:57:39.450 に答える