Google, API V3'ü eşler - aynı noktada birden çok işaretçi

Bunda biraz sıkışmış. JSON aracılığıyla coğrafi koordinatların bir listesini alıyorum ve bunları bir google haritasına atıyorum. Tam olarak aynı noktada iki veya daha fazla marköre sahip olduğum durum dışında her şey iyi çalışıyor. API yalnızca 1 işaretçi görüntüler - en üstteki. Sanırım bu yeterince adil ama hepsini bir şekilde sergilemenin bir yolunu bulmak istiyorum.

Google'da arama yaptım ve birkaç çözüm buldum, ancak çoğunlukla API'nin V2'si için görünüyorlar veya o kadar da iyi değiller. İdeal olarak, bir tür grup işaretleyicisine tıkladığınız ve ardından işaretçileri hepsinin bulunduğu nokta çevresinde kümelenmiş olarak gösteren bir çözüm istiyorum.

Bu veya benzeri bir sorunu olan ve bir çözüm paylaşmak isteyen var mı?

Bir göz atın OverlappingMarkerSpiderfier .
Bir demo sayfası var, ancak tam olarak aynı noktada olan işaretçileri göstermiyorlar, sadece bazıları birbirine çok yakın.

Ancak aynı noktada işaretçileri olan gerçek bir yaşam örneği http://www.ejw.de/ejw-vor-ort/ adresinde görülebilir (harita için aşağı kaydırın ve örümcek etkisini görmek için birkaç işaretleyiciye tıklayın ).

Sorununuz için mükemmel bir çözüm gibi görünüyor.

İşaretleri dengelemek, aynı binada bulunuyorlarsa gerçek bir çözüm değildir. Yapmak isteyebileceğiniz şey, markerclusterer.js'yi şu şekilde değiştirmektir:

1. MarkerClusterer sınıfına bir prototip tıklama yöntemi ekleyin, buna benzer şekilde - bunu daha sonra map initialize () fonksiyonunda geçersiz kılacağız:

   MarkerClusterer.prototype.onClick = function() { 
       return true; 
   };

2. ClusterIcon sınıfında, clusterclick tetikleyicisinden SONRA aşağıdaki kodu ekleyin:

   // Trigger the clusterclick event.
   google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);
   
   var zoom = this.map_.getZoom();
   var maxZoom = markerClusterer.getMaxZoom();
   // if we have reached the maxZoom and there is more than 1 marker in this cluster
   // use our onClick method to popup a list of options
   if (zoom >= maxZoom && this.cluster_.markers_.length > 1) {
      return markerClusterer.onClickZoom(this);
   }

3. Ardından, haritayı başlattığınız ve MarkerClusterer nesnenizi bildirdiğiniz initialize () işlevinizde:

   markerCluster = new MarkerClusterer(map, markers);
   // onClickZoom OVERRIDE
   markerCluster.onClickZoom = function() { return multiChoice(markerCluster); }

   MultiChoice () SİZİN (henüz yazılacak) işlev olduğunda, aralarından seçim yapabileceğiniz seçenekler listesini içeren bir InfoWindow açılır. MarkerClusterer nesnesinin işlevinize aktarıldığını unutmayın, çünkü bu kümede kaç işaretçi olduğunu belirlemek için buna ihtiyacınız olacaktır. Örneğin:

   function multiChoice(mc) {
        var cluster = mc.clusters_;
        // if more than 1 point shares the same lat/long
        // the size of the cluster array will be 1 AND
        // the number of markers in the cluster will be > 1
        // REMEMBER: maxZoom was already reached and we can't zoom in anymore
        if (cluster.length == 1 && cluster[0].markers_.length > 1)
        {
             var markers = cluster[0].markers_;
             for (var i=0; i < markers.length; i++)
             {
                 // you'll probably want to generate your list of options here...
             }
   
             return false;
        }
   
        return true;
   }

Bunu jQuery ile birlikte kullandım ve şu işi yapıyor:

var map;
var markers = [];
var infoWindow;

function initialize() {
    var center = new google.maps.LatLng(-29.6833300, 152.9333300);

    var mapOptions = {
        zoom: 5,
        center: center,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: false,
        streetViewControl: false,
        overviewMapControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }


    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    $.getJSON('jsonbackend.php', function(data) {
        infoWindow = new google.maps.InfoWindow();

        $.each(data, function(key, val) {
            if(val['LATITUDE']!='' && val['LONGITUDE']!='')
            {                
                // Set the coordonates of the new point
                var latLng = new google.maps.LatLng(val['LATITUDE'],val['LONGITUDE']);

                //Check Markers array for duplicate position and offset a little
                if(markers.length != 0) {
                    for (i=0; i < markers.length; i++) {
                        var existingMarker = markers[i];
                        var pos = existingMarker.getPosition();
                        if (latLng.equals(pos)) {
                            var a = 360.0 / markers.length;
                            var newLat = pos.lat() + -.00004 * Math.cos((+a*i) / 180 * Math.PI);  //x
                            var newLng = pos.lng() + -.00004 * Math.sin((+a*i) / 180 * Math.PI);  //Y
                            var latLng = new google.maps.LatLng(newLat,newLng);
                        }
                    }
                }

                // Initialize the new marker
                var marker = new google.maps.Marker({map: map, position: latLng, title: val['TITLE']});

                // The HTML that is shown in the window of each item (when the icon it's clicked)
                var html = "<div id='iwcontent'><h3>"+val['TITLE']+"</h3>"+
                "<strong>Address: </strong>"+val['ADDRESS']+", "+val['SUBURB']+", "+val['STATE']+", "+val['POSTCODE']+"<br>"+
                "</div>";

                // Binds the infoWindow to the point
                bindInfoWindow(marker, map, infoWindow, html);

                // Add the marker to the array
                markers.push(marker);
            }
        });

        // Make a cluster with the markers from the array
        var markerCluster = new MarkerClusterer(map, markers, { zoomOnClick: true, maxZoom: 15, gridSize: 20 });
    });
}

function markerOpen(markerid) {
    map.setZoom(22);
    map.panTo(markers[markerid].getPosition());
    google.maps.event.trigger(markers[markerid],'click');
    switchView('map');
}

google.maps.event.addDomListener(window, 'load', initialize);

Chaoley'in cevabını genişleterek , koordinatları tamamen aynı olan konumların bir listesi ( lngve latözellikleri olan nesneler ) verildiğinde, onları orijinal konumlarından biraz uzaklaştıran (nesneleri yerinde değiştirme) bir işlev uyguladım . Daha sonra merkez noktanın etrafında güzel bir daire oluştururlar.

Enlem (52deg Kuzey) için 0.0003 derecelik daire yarıçapının en iyi sonucu verdiğini ve kilometreye dönüştürüldüğünde enlem ve boylam dereceleri arasındaki farkı telafi etmeniz gerektiğini buldum. Enleminiz için yaklaşık dönüşümleri burada bulabilirsiniz .

var correctLocList = function (loclist) {
    var lng_radius = 0.0003,         // degrees of longitude separation
        lat_to_lng = 111.23 / 71.7,  // lat to long proportion in Warsaw
        angle = 0.5,                 // starting angle, in radians
        loclen = loclist.length,
        step = 2 * Math.PI / loclen,
        i,
        loc,
        lat_radius = lng_radius / lat_to_lng;
    for (i = 0; i < loclen; ++i) {
        loc = loclist[i];
        loc.lng = loc.lng + (Math.cos(angle) * lng_radius);
        loc.lat = loc.lat + (Math.sin(angle) * lat_radius);
        angle += step;
    }
};

@Ignatius en mükemmel cevabı, MarkerClustererPlus v2.0.7 ile çalışmak üzere güncellendi.

1. MarkerClusterer sınıfına bir prototip tıklama yöntemi ekleyin, buna benzer şekilde - bunu daha sonra map initialize () fonksiyonunda geçersiz kılacağız:

   // BEGIN MODIFICATION (around line 715)
   MarkerClusterer.prototype.onClick = function() { 
       return true; 
   };
   // END MODIFICATION

2. ClusterIcon sınıfında, click / clusterclick tetikleyicisinden SONRA aşağıdaki kodu ekleyin:

   // EXISTING CODE (around line 143)
   google.maps.event.trigger(mc, "click", cClusterIcon.cluster_);
   google.maps.event.trigger(mc, "clusterclick", cClusterIcon.cluster_); // deprecated name
   
   // BEGIN MODIFICATION
   var zoom = mc.getMap().getZoom();
   // Trying to pull this dynamically made the more zoomed in clusters not render
   // when then kind of made this useless. -NNC @ BNB
   // var maxZoom = mc.getMaxZoom();
   var maxZoom = 15;
   // if we have reached the maxZoom and there is more than 1 marker in this cluster
   // use our onClick method to popup a list of options
   if (zoom >= maxZoom && cClusterIcon.cluster_.markers_.length > 1) {
       return mc.onClick(cClusterIcon);
   }
   // END MODIFICATION

3. Ardından, haritayı başlattığınız ve MarkerClusterer nesnenizi bildirdiğiniz initialize () işlevinizde:

   markerCluster = new MarkerClusterer(map, markers);
   // onClick OVERRIDE
   markerCluster.onClick = function(clickedClusterIcon) { 
     return multiChoice(clickedClusterIcon.cluster_); 
   }

   MultiChoice () SİZİN (henüz yazılacak) işlev olduğunda, aralarından seçim yapabileceğiniz seçenekler listesini içeren bir InfoWindow açılır. MarkerClusterer nesnesinin işlevinize aktarıldığını unutmayın, çünkü bu kümede kaç işaretçi olduğunu belirlemek için buna ihtiyacınız olacaktır. Örneğin:

   function multiChoice(clickedCluster) {
     if (clickedCluster.getMarkers().length > 1)
     {
       // var markers = clickedCluster.getMarkers();
       // do something creative!
       return false;
     }
     return true;
   };

Yukarıdaki cevaplar daha zarif, ancak gerçekten gerçekten inanılmaz derecede iyi çalışan hızlı ve kirli bir yol buldum. Bunu www.buildinglit.com adresinde çalışırken görebilirsiniz.

Yaptığım tek şey, genxml.php sayfama enlem ve boylam için rastgele bir uzaklık eklemekti, böylece harita her oluşturulduğunda, her seferinde biraz farklı sonuçlar döndürür. Bu bir kesmeye benziyor, ancak gerçekte, işaretçilerin üst üste biniyorlarsa haritada tıklanabilir olmaları için rastgele bir yönde hafif bir dürtme hareketine ihtiyacınız var. Aslında gerçekten işe yarıyor, örümcek yönteminden daha iyi diyebilirim çünkü kim bu karmaşıklıkla başa çıkmak ve her yerde yayılmasını ister. Sadece işaretleyiciyi seçebilmek istiyorsunuz. Rastgele döndürmek mükemmel çalışıyor.

Php_genxml.php dosyamda while deyimi yineleme düğümü oluşturmanın bir örneği burada.

while ($row = @mysql_fetch_assoc($result)){ $offset = rand(0,1000)/10000000;
$offset2 = rand(0, 1000)/10000000;
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row['name']);
$newnode->setAttribute("address", $row['address']);
$newnode->setAttribute("lat", $row['lat'] + $offset);
$newnode->setAttribute("lng", $row['lng'] + $offset2);
$newnode->setAttribute("distance", $row['distance']);
$newnode->setAttribute("type", $row['type']);
$newnode->setAttribute("date", $row['date']);
$newnode->setAttribute("service", $row['service']);
$newnode->setAttribute("cost", $row['cost']);
$newnode->setAttribute("company", $company);

Lat ve long altında + ofset olduğuna dikkat edin. yukarıdaki 2 değişkenden. İşaretçileri zar zor hareket ettirecek kadar rastgele küçük bir ondalık sayı elde etmek için rastgele 0,1000 ile 10000000 arasında bölmek zorunda kaldım. İhtiyaçlarınız için daha kesin olanı elde etmek için bu değişkenle uğraşmakta özgürsünüz.

Aynı binada birden fazla hizmetin olduğu durumlarda, işaretçileri gerçek noktadan bir yarıçap içinde biraz (örneğin 0,001 derece) kaydırabilirsiniz. Bu aynı zamanda güzel bir görsel efekt oluşturmalıdır.

Bu, Matthew Fox'un bu sefer JavaScript kullanarak önerdiğine benzer geçici 'hızlı ve kirli' bir çözümdür.

JavaScript'inizde sadece ikisi ofset küçük rastgele ekleyerek ve uzun yerlerinizden tüm lat ofsetliyebilirsiniz örn

myLocation[i].Latitude+ = (Math.random() / 25000)

( 25000'e bölmenin yeterli ayrım sağladığını ancak işaretçiyi tam konumdan önemli ölçüde uzaklaştırmadığını, örneğin belirli bir adresin)

Bu, onları birbirlerinden dengelemek için oldukça iyi bir iş yapar, ancak yalnızca yakından yakınlaştırdıktan sonra. Uzaklaştırıldığında, konum için birden fazla seçeneğin olduğu hala net olmayacaktır.

V3 için Marker Clusterer'a göz atın - bu kütüphane, yakındaki noktaları bir grup işaretleyicisine kümeler. Kümeler tıklandığında harita yakınlaştırılır. Doğru yakınlaştırdığınızda, yine de aynı noktadaki işaretçilerle aynı sorunu yaşayacağınızı hayal ediyorum.

MarkerClustererPlus ile çalışmak üzere güncellendi.

  google.maps.event.trigger(mc, "click", cClusterIcon.cluster_);
  google.maps.event.trigger(mc, "clusterclick", cClusterIcon.cluster_); // deprecated name

  // BEGIN MODIFICATION
  var zoom = mc.getMap().getZoom();
  // Trying to pull this dynamically made the more zoomed in clusters not render
  // when then kind of made this useless. -NNC @ BNB
  // var maxZoom = mc.getMaxZoom();
  var maxZoom = 15;
  // if we have reached the maxZoom and there is more than 1 marker in this cluster
  // use our onClick method to popup a list of options
  if (zoom >= maxZoom && cClusterIcon.cluster_.markers_.length > 1) {
    var markers = cClusterIcon.cluster_.markers_;
    var a = 360.0 / markers.length;
    for (var i=0; i < markers.length; i++)
    {
        var pos = markers[i].getPosition();
        var newLat = pos.lat() + -.00004 * Math.cos((+a*i) / 180 * Math.PI);  // x
        var newLng = pos.lng() + -.00004 * Math.sin((+a*i) / 180 * Math.PI);  // Y
        var finalLatLng = new google.maps.LatLng(newLat,newLng);
        markers[i].setPosition(finalLatLng);
        markers[i].setMap(cClusterIcon.cluster_.map_);
    }
    cClusterIcon.hide();
    return ;
  }
  // END MODIFICATION

Basit çözümleri seviyorum, işte benimki. Kitaplığı değiştirmek yerine, bu, mantainin korunmasını zorlaştırır. olayı böyle basitçe izleyebilirsiniz

google.maps.event.addListener(mc, "clusterclick", onClusterClick);

sonra onu yönetebilirsin

function onClusterClick(cluster){
    var ms = cluster.getMarkers();

i, yani, liste içeren bir paneli göstermek için bootstrap'i kullandı. "Kalabalık" yerlerde örümcek avlamaktan çok daha rahat ve kullanışlı buluyorum. (Eğer bir kümeleyici kullanıyorsanız, örümcek doğrulamadan sonra çarpışmalarla karşılaşmanız olasıdır). zumu orada da kontrol edebilirsiniz.

Btw. Broşürü yeni buldum ve çok daha iyi çalışıyor gibi görünüyor, VE spiderfy çok akıcı çalışıyor http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html ve açık kaynak.

Şunu kontrol edin: https://github.com/plank/MarkerClusterer

Bu, aynı konumda birkaç işaretleyiciniz olduğunda küme işaretleyicisinde bir infoWindow'a sahip olacak şekilde değiştirilmiş MarkerCluster'dır.

Nasıl çalıştığını buradan görebilirsiniz: http://culturedays.ca/en/2013-activities

Yukarıda verilen cevapları genişleterek, harita nesnesini başlatırken maxZoom seçeneğini ayarladığınızdan emin olun.

Ofset verilmesi, kullanıcı maksimum yakınlaştırma yaptığında işaretçileri uzak tutacaktır. Ben de bunu başarmanın bir yolunu buldum. bu uygun bir yol olmayabilir ama çok iyi çalıştı.

// This code is in swift
for loop markers
{
//create marker
let mapMarker = GMSMarker()
mapMarker.groundAnchor = CGPosition(0.5, 0.5)
mapMarker.position = //set the CLLocation
//instead of setting marker.icon set the iconView
let image:UIIMage = UIIMage:init(named:"filename")
let imageView:UIImageView = UIImageView.init(frame:rect(0,0, ((image.width/2 * markerIndex) + image.width), image.height))
imageView.contentMode = .Right
imageView.image = image
mapMarker.iconView = imageView
mapMarker.map = mapView
}

üstte görmek istediğiniz işaretçi simgesini görecek şekilde işaretleyicinin zIndex değerini ayarlayın, aksi takdirde işaretçileri otomatik değiştirme gibi hareketlendirir. kullanıcı işaretleyiciye dokunduğunda, zIndex Swap kullanarak işaretleyiciyi en üste getirmek için zIndex'i kullanın.

Bundan nasıl kurtulurum .. [Swift]

    var clusterArray = [String]()
    var pinOffSet : Double = 0
    var pinLat = yourLat
    var pinLong = yourLong
    var location = pinLat + pinLong

Yeni bir işaretçi oluşturulmak üzere mi? clusterArrayofsetini kontrol edin ve değiştirin

 if(!clusterArray.contains(location)){
        clusterArray.append(location)
    } else {

        pinOffSet += 1
        let offWithIt = 0.00025 // reasonable offset with zoomLvl(14-16)
        switch pinOffSet {
        case 1 : pinLong = pinLong + offWithIt ; pinLat = pinLat + offWithIt
        case 2 : pinLong = pinLong + offWithIt ; pinLat = pinLat - offWithIt
        case 3 : pinLong = pinLong - offWithIt ; pinLat = pinLat - offWithIt
        case 4 : pinLong = pinLong - offWithIt ; pinLat = pinLat + offWithIt
        default : print(1)
        }


    }

sonuç

Matthew Fox'un sinsi dahiyane cevabına ek olarak, işaret nesnesini ayarlarken her enlem ve boylamaya küçük bir rasgele ofset ekledim. Örneğin:

new LatLng(getLat()+getMarkerOffset(), getLng()+getMarkerOffset()),

private static double getMarkerOffset(){
    //add tiny random offset to keep markers from dropping on top of themselves
    double offset =Math.random()/4000;
    boolean isEven = ((int)(offset *400000)) %2 ==0;
    if (isEven) return  offset;
    else        return -offset;
}

Yukarıdaki yanıtları genişletme, birleştirilmiş dizeler aldığınızda, konum eklenmemiş / çıkarılmamışsa (ör. "37.12340-0.00069"), orijinal enlem / boylamınızı yüzer sayılara dönüştürün, örneğin parseFloat () kullanarak, ardından düzeltmeleri ekleyin veya çıkarın.