Google Maps API V3 - mehrere Markierungen genau an derselben Stelle

Etwas klebte an diesem. Ich rufe eine Liste von Geo-Koordinaten über JSON ab und stelle sie auf eine Google-Karte. Alles funktioniert gut, außer in dem Fall, in dem ich zwei oder mehr Marker genau an der gleichen Stelle habe. Die API zeigt nur 1 Marker an - den obersten. Ich nehme an, das ist fair genug, möchte aber einen Weg finden, sie alle irgendwie anzuzeigen.

Ich habe bei Google gesucht und ein paar Lösungen gefunden, aber sie scheinen meistens für V2 der API zu sein oder einfach nicht so toll. Idealerweise hätte ich gerne eine Lösung, bei der Sie auf eine Art Gruppenmarkierung klicken und dann die Markierungen anzeigen, die sich um die Stelle gruppieren, an der sie sich alle befinden.

Hat jemand dieses oder ein ähnliches Problem und möchte eine Lösung teilen?

Schauen Sie sich OverlappingMarkerSpiderfier an .
Es gibt eine Demoseite, aber sie zeigen keine Markierungen, die sich genau an derselben Stelle befinden, sondern nur einige, die sehr nahe beieinander liegen.

Ein Beispiel aus dem wirklichen Leben mit Markierungen an genau derselben Stelle finden Sie unter http://www.ejw.de/ejw-vor-ort/ (scrollen Sie nach unten zur Karte und klicken Sie auf einige Markierungen, um den Spinneneffekt zu sehen ).

Das scheint die perfekte Lösung für Ihr Problem zu sein.

Das Versetzen der Markierungen ist keine echte Lösung, wenn sie sich im selben Gebäude befinden. Möglicherweise möchten Sie die Datei markerclusterer.js folgendermaßen ändern:

1. Fügen Sie der MarkerClusterer-Klasse wie folgt eine Prototyp-Klickmethode hinzu. Diese werden später in der Funktion map initialize () überschrieben:

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

2. Fügen Sie in der ClusterIcon-Klasse nach dem Clusterclick-Trigger den folgenden Code hinzu:

   // 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. Dann initialisieren Sie in Ihrer Funktion initialize () die Karte und deklarieren Ihr MarkerClusterer-Objekt:

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

   Wobei multiChoice () IHRE (noch zu schreibende) Funktion ist, um ein InfoWindow mit einer Liste von Optionen zur Auswahl zu öffnen. Beachten Sie, dass das markerClusterer-Objekt an Ihre Funktion übergeben wird, da Sie dies benötigen, um zu bestimmen, wie viele Marker sich in diesem Cluster befinden. Beispielsweise:

   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;
   }

Ich habe dies zusammen mit jQuery verwendet und es macht den Job:

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);

Als Erweiterung von Chaoleys Antwort implementierte ich eine Funktion, die bei einer Liste von Orten (Objekte mit lngund latEigenschaften), deren Koordinaten genau gleich sind, sie ein wenig von ihrem ursprünglichen Ort entfernt (Objekte an Ort und Stelle ändern). Sie bilden dann einen schönen Kreis um den Mittelpunkt.

Ich fand heraus, dass für meinen Breitengrad (52 Grad Nord) 0,0003 Grad Kreisradius am besten funktionieren und dass Sie den Unterschied zwischen Breiten- und Längengrad in Kilometern ausgleichen müssen. Sie können ungefähre Conversions für Ihre Breite finden hier .

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 beste Antwort, aktualisiert, um mit v2.0.7 von MarkerClustererPlus zu arbeiten.

1. Fügen Sie der MarkerClusterer-Klasse wie folgt eine Prototyp-Klickmethode hinzu. Diese werden später in der Funktion map initialize () überschrieben:

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

2. Fügen Sie in der ClusterIcon-Klasse nach dem Auslöser click / clusterclick den folgenden Code hinzu:

   // 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. Dann initialisieren Sie in Ihrer Funktion initialize () die Karte und deklarieren Ihr MarkerClusterer-Objekt:

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

   Wobei multiChoice () IHRE (noch zu schreibende) Funktion ist, um ein InfoWindow mit einer Liste von Optionen zur Auswahl zu öffnen. Beachten Sie, dass das markerClusterer-Objekt an Ihre Funktion übergeben wird, da Sie dies benötigen, um zu bestimmen, wie viele Marker sich in diesem Cluster befinden. Beispielsweise:

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

Die obigen Antworten sind eleganter, aber ich habe einen schnellen und schmutzigen Weg gefunden, der wirklich wirklich unglaublich gut funktioniert. Sie können es in Aktion unter www.buildinglit.com sehen

Ich habe meiner genxml.php-Seite lediglich einen zufälligen Versatz zum Breiten- und Längengrad hinzugefügt, sodass jedes Mal, wenn die Karte mit Markierungen erstellt wird, leicht unterschiedliche Ergebnisse mit Versatz zurückgegeben werden. Das klingt nach einem Hack, aber in Wirklichkeit müssen die Markierungen nur einen leichten Schub in eine zufällige Richtung bewegen, damit sie auf der Karte angeklickt werden können, wenn sie sich überlappen. Es funktioniert wirklich sehr gut, würde ich besser sagen als die Spinnenmethode, denn wer möchte mit dieser Komplexität umgehen und sie überall entspringen lassen. Sie möchten nur den Marker auswählen können. Das zufällige Anstupsen funktioniert perfekt.

Hier ist ein Beispiel für die Erstellung des while-Anweisungsiterationsknotens in meiner php_genxml.php

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);

Beachten Sie unter lat und long, dass es den + Offset gibt. aus den 2 Variablen oben. Ich musste zufällig durch 0,1000 durch 10000000 teilen, um eine Dezimalstelle zu erhalten, die zufällig klein genug war, um die Markierungen kaum zu bewegen. Fühlen Sie sich frei, an dieser Variablen zu basteln, um eine zu erhalten, die genauer auf Ihre Bedürfnisse zugeschnitten ist.

In Situationen, in denen sich mehrere Dienste im selben Gebäude befinden, können Sie die Markierungen nur geringfügig (z. B. um 0,001 Grad) in einem Radius vom tatsächlichen Punkt versetzen. Dies sollte auch einen schönen visuellen Effekt erzeugen.

Dies ist eher eine "schnelle und schmutzige" Notlösung, ähnlich der von Matthew Fox vorgeschlagenen, diesmal mit JavaScript.

In JavaScript können Sie einfach das Lat und Long aller Ihrer Positionen versetzen, indem Sie beiden einen kleinen zufälligen Versatz hinzufügen, z

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

(Ich habe festgestellt, dass das Teilen durch 25000 eine ausreichende Trennung ergibt, den Marker jedoch nicht wesentlich von der genauen Position, z. B. einer bestimmten Adresse, entfernt.)

Dies macht es einigermaßen gut, sie voneinander zu versetzen, aber erst, nachdem Sie genau hineingezoomt haben. Beim Verkleinern ist immer noch nicht klar, dass es mehrere Optionen für den Standort gibt.

Schauen Sie sich Marker Clusterer für V3 an - diese Bibliothek gruppiert nahegelegene Punkte zu einem Gruppenmarker. Die Karte wird vergrößert, wenn auf die Cluster geklickt wird. Ich würde mir vorstellen, dass Sie beim Vergrößern immer noch das gleiche Problem mit Markierungen an derselben Stelle haben würden.

Aktualisiert, um mit MarkerClustererPlus zu arbeiten.

  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

Ich mag einfache Lösungen, also hier ist meine. Anstatt die Bibliothek zu modifizieren, würde es schwieriger werden, sie zu pflegen. Sie können das Ereignis einfach so verfolgen

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

dann können Sie es weiter verwalten

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

Ich habe also Bootstrap verwendet, um ein Panel mit einer Liste anzuzeigen. was ich viel komfortabler und brauchbarer finde als Spinnenfischen an "überfüllten" Orten. (Wenn Sie einen Clusterer verwenden, kommt es wahrscheinlich zu Kollisionen, sobald Sie eine Spinne haben). Dort können Sie auch den Zoom überprüfen.

Übrigens. Ich habe gerade eine Broschüre gefunden und es scheint viel besser zu funktionieren. Der Cluster AND Spiderfy funktioniert sehr flüssig. http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html und es ist Open Source.

Überprüfen Sie dies: https://github.com/plank/MarkerClusterer

Dies ist der MarkerCluster, der so geändert wurde, dass er ein infoWindow in einem Cluster-Marker enthält, wenn sich mehrere Marker an derselben Position befinden.

Sie können hier sehen, wie es funktioniert: http://culturedays.ca/en/2013-activities

Wenn Sie die oben angegebenen Antworten erweitern, stellen Sie einfach sicher, dass Sie beim Initialisieren des Kartenobjekts die Option maxZoom festlegen.

Wenn Sie den Versatz angeben, werden die Markierungen weit entfernt, wenn der Benutzer auf max. Also habe ich einen Weg gefunden, das zu erreichen. Dies ist vielleicht kein richtiger Weg, aber es hat sehr gut funktioniert.

// 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
}

Stellen Sie den zIndex des Markers so ein, dass Sie das Markierungssymbol sehen, das Sie oben sehen möchten. Andernfalls werden die Markierungen wie beim automatischen Tauschen animiert. Wenn der Benutzer auf den Marker tippt, behandeln Sie den zIndex, um den Marker mit zIndex Swap nach oben zu bringen.

Wie man damit durchkommt .. [Swift]

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

Ein neuer Marker wird erstellt? Überprüfen clusterArrayund manipulieren Sie den Versatz

 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)
        }


    }

Ergebnis

Zusätzlich zu Matthew Fox 'hinterhältiger genialer Antwort habe ich jedem Lat und Lng beim Setzen des Markerobjekts einen kleinen zufälligen Versatz hinzugefügt. Beispielsweise:

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;
}

Wenn Sie die obigen Antworten erweitern, wenn Sie verknüpfte Zeichenfolgen erhalten haben und keine Position hinzugefügt / subtrahiert haben (z. B. "37.12340-0.00069"), konvertieren Sie Ihren ursprünglichen Längen- / Breitengrad in Gleitkommazahlen, z. B. mit parseFloat (), und fügen Sie dann Korrekturen hinzu oder subtrahieren Sie sie.