Google maps API V3 - beberapa penanda di tempat yang sama persis

Sedikit terjebak yang satu ini. Saya mengambil daftar koordinat geografis melalui JSON dan memunculkannya ke peta google. Semua berfungsi dengan baik kecuali dalam contoh ketika saya memiliki dua atau lebih penanda di tempat yang sama persis. API hanya menampilkan 1 penanda - yang teratas. Saya kira ini cukup adil, tetapi saya ingin menemukan cara untuk menampilkan semuanya.

Saya telah mencari di google dan menemukan beberapa solusi tetapi sebagian besar tampaknya untuk V2 dari API atau tidak terlalu bagus. Idealnya saya menginginkan solusi di mana Anda mengklik semacam penanda grup dan yang kemudian menunjukkan penanda yang berkerumun di sekitar tempat mereka semua berada.

Adakah yang punya masalah ini atau yang serupa dan mau berbagi solusi?

Lihat OverlappingMarkerSpiderfier .
Ada halaman demo, tetapi mereka tidak menampilkan penanda yang persis di tempat yang sama, hanya beberapa yang sangat berdekatan.

Tetapi contoh kehidupan nyata dengan penanda di tempat yang persis sama dapat dilihat di http://www.ejw.de/ejw-vor-ort/ (gulir ke bawah untuk peta dan klik beberapa penanda untuk melihat efek laba-laba ).

Tampaknya itu menjadi solusi sempurna untuk masalah Anda.

Mengimbangi penanda bukanlah solusi nyata jika ditempatkan di gedung yang sama. Apa yang mungkin ingin Anda lakukan adalah memodifikasi markerclusterer.js seperti ini:

1. Tambahkan metode klik prototipe di kelas MarkerClusterer, seperti itu - kita akan menimpanya nanti di fungsi map initialize ():

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

2. Di kelas ClusterIcon, tambahkan kode berikut SETELAH pemicu clusterclick:

   // 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. Kemudian, dalam fungsi initialize () tempat Anda menginisialisasi peta dan mendeklarasikan objek MarkerClusterer Anda:

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

   Di mana multiChoice () adalah fungsi ANDA (belum ditulis) untuk memunculkan InfoWindow dengan daftar opsi untuk dipilih. Perhatikan bahwa objek markerClusterer diteruskan ke fungsi Anda, karena Anda akan memerlukan ini untuk menentukan berapa banyak marker yang ada di cluster itu. Sebagai contoh:

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

Saya menggunakan ini bersama jQuery dan itu melakukan pekerjaan:

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

Memperluas jawaban Chaoley , saya menerapkan fungsi itu, dengan daftar lokasi (objek dengan lngdan latproperti) yang koordinatnya persis sama, memindahkannya sedikit dari lokasi aslinya (memodifikasi objek di tempat). Mereka kemudian membentuk lingkaran yang bagus di sekitar titik tengah.

Saya menemukan bahwa, untuk garis lintang saya (52 derajat Utara), radius lingkaran 0,0003 derajat bekerja paling baik, dan Anda harus mengimbangi perbedaan antara derajat garis lintang dan garis bujur ketika dikonversi ke kilometer. Anda dapat menemukan perkiraan konversi untuk garis lintang Anda di sini .

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 jawaban paling luar biasa, diperbarui untuk bekerja dengan v2.0.7 dari MarkerClustererPlus.

1. Tambahkan metode klik prototipe di kelas MarkerClusterer, seperti itu - kita akan menimpanya nanti di fungsi map initialize ():

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

2. Di kelas ClusterIcon, tambahkan kode berikut SETELAH pemicu klik / clusterclick:

   // 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. Kemudian, dalam fungsi initialize () tempat Anda menginisialisasi peta dan mendeklarasikan objek MarkerClusterer Anda:

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

   Di mana multiChoice () adalah fungsi ANDA (belum ditulis) untuk memunculkan InfoWindow dengan daftar opsi untuk dipilih. Perhatikan bahwa objek markerClusterer diteruskan ke fungsi Anda, karena Anda akan memerlukan ini untuk menentukan berapa banyak marker yang ada di cluster itu. Sebagai contoh:

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

Jawaban di atas lebih elegan, tetapi saya menemukan cara cepat dan kotor yang benar-benar berfungsi dengan sangat baik. Anda dapat melihatnya beraksi di www.buildinglit.com

Yang saya lakukan hanyalah menambahkan offset acak ke garis lintang dan garis bujur ke halaman genxml.php saya sehingga mengembalikan hasil yang sedikit berbeda setiap kali dengan offset setiap kali peta dibuat dengan penanda. Ini terdengar seperti peretasan, tetapi pada kenyataannya Anda hanya perlu penanda untuk memindahkan sedikit dorongan ke arah acak agar dapat diklik di peta jika tumpang tindih. Ini benar-benar bekerja dengan sangat baik, saya akan mengatakan lebih baik daripada metode laba-laba karena siapa yang ingin menangani kerumitan itu dan membuatnya muncul di mana-mana. Anda hanya ingin dapat memilih penanda. Menyenggolnya secara acak bekerja dengan sempurna.

Berikut adalah contoh pembuatan node iterasi pernyataan while di php_genxml.php saya

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

Perhatikan di bawah garis lintang dan bujur ada + offset. dari 2 variabel di atas. Saya harus membagi acak dengan 0,1000 dengan 10000000 untuk mendapatkan desimal yang cukup kecil secara acak untuk hampir memindahkan penanda. Jangan ragu untuk mengotak-atik variabel itu untuk mendapatkan yang lebih tepat untuk kebutuhan Anda.

Untuk situasi di mana ada beberapa layanan di gedung yang sama, Anda dapat mengimbangi penanda hanya sedikit, (misalnya dengan 0,001 derajat), dalam radius dari titik sebenarnya. Ini juga harus menghasilkan efek visual yang bagus.

Ini lebih merupakan solusi sementara 'cepat dan kotor' yang mirip dengan yang disarankan Matthew Fox, kali ini menggunakan JavaScript.

Dalam JavaScript Anda bisa mengimbangi lintang dan bujur dari semua lokasi Anda dengan menambahkan offset acak kecil ke keduanya, misalnya

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

(Saya menemukan bahwa membagi dengan 25000 memberikan pemisahan yang cukup tetapi tidak memindahkan penanda secara signifikan dari lokasi yang sebenarnya, misalnya alamat tertentu)

Ini membuat pekerjaan yang cukup baik untuk mengimbangi satu sama lain, tetapi hanya setelah Anda memperbesarnya lebih dekat. Saat diperbesar, masih tidak jelas bahwa ada beberapa opsi untuk lokasi tersebut.

Lihat Marker Clusterer untuk V3 - pustaka ini mengelompokkan poin-poin terdekat ke dalam penanda grup. Peta diperbesar saat cluster diklik. Saya membayangkan ketika diperbesar Anda masih memiliki masalah yang sama dengan penanda di tempat yang sama.

Diperbarui untuk bekerja dengan MarkerClustererPlus.

  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

Saya suka solusi sederhana jadi ini solusi saya. Alih-alih memodifikasi lib, yang akan membuatnya lebih sulit untuk dikelola. Anda cukup menonton acara seperti ini

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

maka Anda dapat mengelolanya

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

i, yaitu, menggunakan bootstrap untuk menampilkan panel dengan daftar. yang menurut saya jauh lebih nyaman dan bermanfaat daripada spiderfying di tempat-tempat "ramai". (jika Anda menggunakan clusterer kemungkinan besar Anda akan berakhir dengan tabrakan setelah Anda spiderfy). Anda juga dapat memeriksa zoom di sana.

btw. saya baru saja menemukan leaflet dan tampaknya bekerja jauh lebih baik, cluster DAN spiderfy bekerja dengan sangat lancar http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.10000.html dan ini open-source.

Periksa ini: https://github.com/plank/MarkerClusterer

Ini adalah MarkerCluster yang dimodifikasi untuk memiliki infoWindow di dalam penanda cluster, saat Anda memiliki beberapa penanda di posisi yang sama.

Anda dapat melihat cara kerjanya di sini: http://culturedays.ca/en/2013-activities

Memperluas jawaban yang diberikan di atas, cukup pastikan Anda menyetel opsi maxZoom saat menginisialisasi objek peta.

Pemberian offset akan membuat penanda jauh saat pengguna memperbesar hingga maks. Jadi saya menemukan cara untuk mencapai itu. ini mungkin bukan cara yang tepat tetapi berhasil dengan sangat baik.

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

atur zIndex penanda sehingga Anda akan melihat ikon penanda yang ingin Anda lihat di atas, jika tidak maka akan menganimasikan penanda seperti auto swapping. saat pengguna mengetuk penanda, tangani zIndex untuk membawa penanda di atas menggunakan zIndex Swap.

Bagaimana cara lolos begitu saja .. [Swift]

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

Penanda baru akan dibuat? periksa clusterArraydan manipulasi offsetnya

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


    }

hasil

Menambah jawaban jenius yang licik dari Matthew Fox, saya telah menambahkan offset acak kecil untuk setiap lat dan lng saat mengatur objek marker. Sebagai contoh:

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

Memperluas jawaban di atas, ketika Anda mendapatkan string yang digabungkan, bukan posisi yang ditambahkan / dikurangi (misalnya "37.12340-0.00069"), ubah garis lintang / bujur asli Anda menjadi float, misalnya menggunakan parseFloat (), lalu tambahkan atau kurangi koreksi.