Question

我已将MarkerClusterer添加到我的Google Maps V3脚本中。工作正常 - 但是我有一些标记具有相同的lat长度 - MarkerClusterer无法识别这一点，当达到最大缩放级别时，它将一个标记叠加在另一个之上，因此我只能查看其中一个。为了解决这个问题，我使用了一个额外的脚本（oms），它允许一组具有相同纬度的标记在点击时展开。这是令人困惑的部分;

当我单击最后一个单独的标记时，附加脚本会扩展所有相同的标记 - 但是我需要在此之前向前一步触发 - 当相同的标记在群集中时。是否可以在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);

  });



}

Answer 1

我有一个类似的问题，你有没有设法解决这个问题？我认为找到答案的关键在于google clustermarkerer插件的“缩放”属性。

但最终是markerClusterer本身具有属性

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

试一下，看看它是否有效

MarkerClusterer的Max Zoom - 相同的lat long

1 个答案: