Google API V3 को मैप करता है - एक ही स्थान पर कई मार्कर

Question

बिट इस पर अटक गया। मैं JSON के माध्यम से जियो कॉर्डर्स की एक सूची प्राप्त कर रहा हूं और उन्हें एक Google मानचित्र पर पॉपप कर रहा हूं। उदाहरण के अलावा जब मैं दो या दो से अधिक मार्करों को एक ही स्थान पर छोड़ देता हूं तो सभी अच्छी तरह से काम कर रहे हैं। एपीआई केवल 1 मार्कर को प्रदर्शित करता है - शीर्ष। यह पर्याप्त है जो मुझे लगता है लेकिन मैं उन सभी को किसी भी तरह प्रदर्शित करने का एक तरीका खोजना चाहता हूं।

मैंने Google को खोजा है और कुछ समाधान पाया है, लेकिन वे ज्यादातर एपीआई के V2 के लिए प्रतीत होते हैं या सिर्फ इतना ही नहीं। आदर्श रूप से मैं एक समाधान चाहूंगा जहां आप किसी प्रकार के समूह मार्कर पर क्लिक करते हैं और फिर मार्करों को उस स्थान के चारों ओर दिखाई देता है जो वे सभी हैं।

किसी को भी यह समस्या या समान था और समाधान साझा करने के लिए परवाह करेगा?

Answer 1

OverlappingMarkerSpiderfier पर एक नज़र डालें ।
एक डेमो पेज है, लेकिन वे मार्करों को नहीं दिखाते हैं जो ठीक उसी स्थान पर हैं, केवल कुछ जो एक साथ बहुत करीब हैं।

लेकिन सटीक उसी स्थान पर मार्करों के साथ एक वास्तविक जीवन उदाहरण http://www.ejw.de/ejw-vor-ort/ पर देखा जा सकता है (मानचित्र के लिए नीचे स्क्रॉल करें और मकड़ी-प्रभाव देखने के लिए कुछ मार्करों पर क्लिक करें )।

जो आपकी समस्या का सही समाधान लगता है।

Comments

यह भयानक है, और पूरी तरह से क्लस्टर लाइब्रेरी से छोड़ी गई आवश्यकता को पूरा करता है, जो मार्करों को उसी सटीक अक्षांश / लंबे समय तक संभाल नहीं करता है।

— जस्टिन

यदि मार्कर क्लस्टर केOverlappingMarkerSpiderfier साथ संयोजन में उपयोग किया जाता है , तो क्लस्टर कंस्ट्रक्टर पर विकल्प सेट करना एक अच्छा विकल्प है । निर्दिष्ट ज़ूम लेवेल के बाद मार्करों को यह "अशुद्ध" करता है। maxZoom

— डिडेरिक

@ मुझे नहीं पता कि आप उस वेबसाइट के डेवलपर हैं, लेकिन मैं आपको बताना चाहता हूं कि ejw.de पर नक्शा टूटा हुआ है। मुझे JS त्रुटि मिलती है।

— एलेक्स

मैंने प्रस्तावित डेमो की जाँच की, लेकिन यह मृत प्रतीत होता है। आगे के शोध के बाद मुझे यह उदाहरण मिला कि मार्कर क्लस्टर और स्पाइडरफायर को कैसे एकीकृत किया जाए। कोई लाइव डेमो नहीं है, लेकिन सिर्फ क्लोन और रीडमी का पालन करें। github.com/yagoferrer/markerclusterer-plus-spiderfier-example

— Sax

Answer 2

यदि वे एक ही भवन में स्थित हैं, तो मार्कर को बंद करना वास्तविक समाधान नहीं है। आप जो करना चाहते हैं, वह markerclusterer.js को संशोधित कर सकता है:

1. MarkerClusterer वर्ग में एक प्रोटोटाइप क्लिक विधि जोड़ें, जैसे कि - हम इसे बाद में मानचित्र प्रारंभ में ओवरराइड कर देंगे ():

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

2. ClusterIcon वर्ग में, निम्न कोड जोड़ें क्लस्टर क्लच ट्रिगर के बाद:

   // 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. फिर, अपने इनिशियलाइज़ () फंक्शन में जहाँ आप मैप को इनिशियलाइज़ करते हैं और अपनी MarkerClusterer ऑब्जेक्ट घोषित करते हैं:

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

   बहुविकल्पी () आपकी (अभी तक लिखी जाने वाली) जानकारी का चयन करने के लिए विकल्पों की एक सूची के साथ एक जानकारी को पॉपअप करने के लिए कार्य करें। ध्यान दें कि मार्करक्लेस्टर ऑब्जेक्ट आपके फ़ंक्शन को पास किया गया है, क्योंकि आपको यह निर्धारित करने की आवश्यकता होगी कि उस क्लस्टर में कितने मार्कर हैं। उदाहरण के लिए:

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

Answer 3

मैंने jQuery के साथ इसका इस्तेमाल किया और यह काम करता है:

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

Comments

Thx मेरे लिए पूरी तरह से काम करता है :) बस मैं घंटों से क्या खोज रहा था: p

— Jicao

सुंदर और सुरुचिपूर्ण समाधान। धन्यवाद!

— Concept211

सही समाधान थोड़ा ऑफसेट! क्या यह संभव है, हम मार्कर पर मंडराते हैं और इसकी तुलना में कई मार्करों को प्रदर्शित करते हैं

— इंतेखाब खान

Answer 4

छोले के जवाब पर विस्तार करते हुए , मैंने एक फ़ंक्शन लागू किया, जिसमें उन स्थानों की सूची दी गई है ( जिनके साथ गुण lngऔर latगुण हैं) जिनके निर्देशांक बिल्कुल समान हैं, उन्हें उनके मूल स्थान से थोड़ा दूर (वस्तुओं को संशोधित करना) में ले जाता है। वे तब केंद्र बिंदु के चारों ओर एक अच्छा वृत्त बनाते हैं।

मैंने पाया कि, मेरे अक्षांश (52deg North) के लिए, सर्कल रेडियस का 0.0003 डिग्री सबसे अच्छा काम करता है, और आपको किलोमीटर में परिवर्तित होने पर अक्षांश और देशांतर डिग्री के बीच के अंतर के लिए बनाना होगा। आप अपने अक्षांश के लिए अनुमानित रूपांतरण यहाँ पा सकते हैं ।

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

Comments

DzinX, मैंने पिछले 4 घंटे बिताए हैं ताकि यह पता लगाने की कोशिश करूं कि मैं बिना किसी लाभ के आपके कोड को अपने कोड में कैसे लागू कर सकता हूं। मैं इस नतीजे पर पहुंचा हूं कि मैं इसको चूसता हूं और वास्तव में आपकी मदद की सराहना करता हूं। यहाँ मैं कोड को प्लग इन करने की कोशिश कर रहा हूँ: pastebin.com/5qYbvybm - किसी भी मदद की सराहना की जाएगी! धन्यवाद!

— WebMW

WebMW: जब आप XML से मार्करों को निकालते हैं, तो आपको पहले उन्हें सूचियों में समूहित करना होगा ताकि प्रत्येक सूची में उसी स्थान पर इंगित करने वाले मार्कर शामिल हों। फिर, प्रत्येक सूची में, जिसमें एक से अधिक तत्व शामिल हैं, सुधारेंLLList ()। ऐसा करने के बाद ही, google.maps.Marker ऑब्जेक्ट बनाएं।

— DzinX

इसका काम नहीं कर रहा .... यह सिर्फ मेरी अक्षांश देशांतर में परिवर्तन 37.68625400000000000,-75.71669800000000000करने के लिए 37.686254,-75.716698भी है जो सभी मूल्यों के लिए एक ही है ... M जैसे ... कुछ उम्मीद 37.68625400000000000,-75.71669800000000000करने के लिए 37.6862540000001234,-75.7166980000001234 37.6862540000005678,-75.7166980000005678आदि .. मैं अपने कोण बदलते कोशिश की।

— प्रेमशंकर तिवारी

हम्म, चलो थोड़ा खुदाई करें और उम्मीद करें कि @DzinX अभी भी क्षेत्र में है। क्या आप (या किसी और) को समझा सकते हैं कि आप उन सभी नंबरों को कैसे प्राप्त करते हैं? Lng_radius, आदि? बहुत बहुत धन्यवाद। :)

— Vae

@Vae: त्रिज्या कितनी बड़ी है, आप चाहते हैं कि सर्कल हो। आप चाहते हैं कि सर्कल पिक्सेल में गोल दिखे, इसलिए आपको यह जानना होगा कि आपके स्थान में, अक्षांश के 1 डिग्री अक्षांश के 1 डिग्री (मानचित्र पर पिक्सेल) में क्या अनुपात है। आप इसे कुछ वेबसाइटों पर पा सकते हैं या सिर्फ नंबर सही होने तक प्रयोग कर सकते हैं। कोण कितना ऊपर से दाईं ओर पहला पिन है।

— DzinX

Answer 5

@Ignatius सबसे उत्कृष्ट उत्तर, MarkerClustererPlus के v2.0.7 के साथ काम करने के लिए अद्यतन किया गया।

1. MarkerClusterer वर्ग में एक प्रोटोटाइप क्लिक विधि जोड़ें, जैसे कि - हम इसे बाद में मानचित्र प्रारंभ में ओवरराइड कर देंगे ():

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

2. ClusterIcon वर्ग में, निम्न कोड जोड़ें / क्लिक करें क्लस्टर क्लिक करें:

   // 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. फिर, अपने इनिशियलाइज़ () फंक्शन में जहाँ आप मैप को इनिशियलाइज़ करते हैं और अपनी MarkerClusterer ऑब्जेक्ट घोषित करते हैं:

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

   बहुविकल्पी () आपकी (अभी तक लिखी जाने वाली) जानकारी का चयन करने के लिए विकल्पों की एक सूची के साथ एक जानकारी को पॉपअप करने के लिए कार्य करें। ध्यान दें कि मार्करक्लेस्टर ऑब्जेक्ट आपके फ़ंक्शन को पास किया गया है, क्योंकि आपको यह निर्धारित करने की आवश्यकता होगी कि उस क्लस्टर में कितने मार्कर हैं। उदाहरण के लिए:

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

Comments

धन्यवाद, यह पूरी तरह से काम करता है! आपके maxZoomमुद्दे के लिए, मुझे लगता है कि यह केवल एक मुद्दा है अगर कोई अधिकतम सेट नहीं है या क्लस्टर के लिए अधिकतम नक्शा मानचित्र के लिए ज़ूम से अधिक है। मैंने आपकी हार्डकोड को इस स्निपेट से बदल दिया है और यह अच्छी तरह से काम करने लगता है:var maxZoom = mc.getMaxZoom(); if (null === maxZoom || maxZoom > mc.getMap().maxZoom) { maxZoom = mc.getMap().maxZoom; if (null === maxZoom) { maxZoom = 15; } }

— पास्कल

मुझे पता है कि यह वास्तव में पुराना है, लेकिन मैं इस समाधान का उपयोग करने की कोशिश कर रहा हूं। मेरे पास यह काम कर रहा है, लेकिन क्लस्टर डेटा के साथ एक infowindow दिखाने के मामले में ... मुझे पहले स्थान पर क्लिक किए गए क्लस्टर की मार्कर स्थिति कैसे मिलती है ताकि मैं infowindow दिखा सकूं? मार्कर मेरे डेटा की सरणी है ... लेकिन मैं क्लस्टर आइकन / मार्कर पर infowindow कैसे दिखा सकता हूं?

— user756659

@ user756659 मल्टीकॉपी में आप लेट / लेंग के माध्यम से: clickedCluster.center_.lat()/clickedCluster.center_.lng()

— जेन्स कोहल

@ पास्कल और थोड़े से मोटापे के साथ हम इसे समाप्त करते हैं, जो काम कर सकता है, लेकिन जैसा कि अजगर का ताओ कहता है। "पठनीयता मायने रखता है"। var maxZoom = Math.min (mc.getMaxZoom () || 15, mc.getMap ()। maxZoom || 15) ||

— नंदे

Answer 6

उपरोक्त उत्तर अधिक सुरुचिपूर्ण हैं, लेकिन मुझे एक त्वरित और गंदा तरीका मिला जो वास्तव में वास्तव में अविश्वसनीय रूप से अच्छी तरह से काम करता है। आप इसे www.buildinglit.com पर एक्शन में देख सकते हैं

सभी मैंने किया था और मेरे genxml.php पृष्ठ पर अक्षांश और देशांतर के लिए एक यादृच्छिक ऑफसेट जोड़ दिया गया था ताकि यह प्रत्येक बार मानचित्र के मार्करों के साथ निर्मित होने पर प्रत्येक बार ऑफसेट के साथ थोड़ा अलग परिणाम लौटाए। यह एक हैक की तरह लगता है, लेकिन वास्तव में आपको केवल ओवरलैप होने पर मानचित्र पर क्लिक करने योग्य होने के लिए मार्करों को एक यादृच्छिक दिशा में थोड़ी सी कुहनी हिलाने की आवश्यकता होती है। यह वास्तव में अच्छी तरह से काम करता है, मैं मकड़ी विधि से बेहतर कहूंगा क्योंकि जो उस जटिलता से निपटना चाहते हैं और उनके पास हर जगह वसंत है। आप बस मार्कर का चयन करने में सक्षम होना चाहते हैं। यह बेतरतीब ढंग से सही काम करता है।

यहाँ मेरे 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);

लेट और लॉन्ग के तहत सूचना + ऑफसेट है। ऊपर 2 चर से। मुझे एक दशमलव को यादृच्छिक रूप से 0,1000 से 10000000 में विभाजित करना था ताकि एक दशमलव प्राप्त किया जा सके जो केवल मार्करों को मुश्किल से स्थानांतरित करने के लिए यादृच्छिक रूप से छोटा था। उस चर के साथ छेड़छाड़ करने के लिए स्वतंत्र महसूस करें जो आपकी आवश्यकताओं के लिए अधिक सटीक है।

Comments

ठंडा! यह वह गंदी हैक है जो मुझे बहुत उपयोगी

— लगी,

Answer 7

उन स्थितियों के लिए जहां एक ही इमारत में कई सेवाएं हैं, आप वास्तविक बिंदु से एक त्रिज्या में, मार्करों को थोड़ा कम कर सकते हैं, (.001 डिग्री के अनुसार)। यह भी एक अच्छा दृश्य प्रभाव का उत्पादन करना चाहिए।

Answer 8

यह मैथ्यू फॉक्स के सुझाव के समान स्टॉपगैप 'त्वरित और गंदे' समाधान से अधिक है, इस बार जावास्क्रिप्ट का उपयोग करते हुए।

जावास्क्रिप्ट में आप बस अपने सभी स्थानों के अक्षांश और लंबे समय को ऑफसेट कर सकते हैं, जैसे दोनों में एक छोटे से यादृच्छिक ऑफसेट को जोड़कर

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

(मैंने पाया कि 25000 से विभाजित करने से पर्याप्त अलगाव मिलता है, लेकिन मार्कर को सटीक स्थान से महत्वपूर्ण रूप से स्थानांतरित नहीं करता है जैसे कि एक विशिष्ट पता)

यह उन्हें एक-दूसरे से ऑफसेट करने का एक बहुत अच्छा काम करता है, लेकिन केवल जब आप निकटता से ज़ूम इन करते हैं। जब ज़ूम आउट किया जाता है, तब भी यह स्पष्ट नहीं होगा कि स्थान के लिए कई विकल्प हैं।

Comments

यह मुझे पंसद है। यदि आपको सही प्रतिनिधि मार्कर की आवश्यकता नहीं है, तो बस 25000 से 250 या 25 कम करें। सरल और त्वरित समाधान।

— फिड

Answer 9

V3 के लिए मार्कर क्लस्टर की जाँच करें - यह पुस्तकालय समूह के मार्कर में पास के बिंदुओं को प्रदर्शित करता है। जब क्लस्टर पर क्लिक किया जाता है तो मैप ज़ूम करता है। मुझे लगता है कि जब आप सही ज़ूम इन करते हैं, तब भी मार्करों के साथ एक ही समस्या होगी।

Comments

हां, उस आसान छोटी लाइब्रेरी पर एक नज़र डाल ली, लेकिन यह अभी भी इस मुद्दे पर काबू पाने के लिए नहीं लगता है। मैं एक कंपनी के लिए एक सेवा लोकेटर बना रहा हूं जिसमें कभी-कभी एक ही कार्यालय ब्लॉक में एक से अधिक सेवा होती है और इसलिए सटीक एक ही जियो कोऑर्डर्स। मैं एक जानकारी विंडो में विभिन्न सेवाओं को दिखा सकता हूं, लेकिन यह सिर्फ सबसे सुरुचिपूर्ण समाधान नहीं लगता है ...

— Louzoid

@ लॉज़ोइड मार्कर क्लस्टर समस्या को दूर नहीं करता है क्योंकि मैंने अभी पता लगाया है। मुझे एक ही समस्या है, मेरे पास एक इमारत के भीतर कई कंपनियां हैं और इसलिए यह केवल 1 मार्कर दिखाता है।

— रॉब

Answer 10

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

Comments

इस दृष्टिकोण के लिए उपयोगकर्ता को क्लस्टर आइकन पर क्लिक करने की आवश्यकता होती है, और उपयोग के मामलों को कवर नहीं किया जाएगा जहां ज़ूम स्लाइडर या माउस स्क्रॉलिंग के साथ नेविगेशन किया जाता है। किसी भी विचार कैसे उन मुद्दों को संबोधित करने के लिए?

— रेमी स्ट्योर

Answer 11

मुझे यहां सरल उपाय पसंद हैं। इसके बजाय परिवाद को संशोधित करने के लिए, जिससे यह कठिन हो सकता है। आप बस इस तरह की घटना देख सकते हैं

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

तब आप इसे प्रबंधित कर सकते हैं

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

i, अर्थात, एक सूची के साथ एक पैनल दिखाने के लिए बूटस्ट्रैप का इस्तेमाल किया। जो मुझे "भीड़" वाली जगहों पर मकड़ी के काटने से बहुत अधिक आरामदायक और उपयोगी लगता है। (यदि आप एक क्लस्टर अवसरों का उपयोग कर रहे हैं, तो आप एक बार मकड़ी से टकराकर समाप्त हो जाएंगे)। आप वहां भी ज़ूम चेक कर सकते हैं।

btw। मुझे बस पत्रक मिला और यह बहुत बेहतर काम करता है, क्लस्टर और स्पाइडरफ़ी बहुत तरल रूप से काम करता है http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realtime.10000.html और यह ओपन-सोर्स है।

Answer 12

इसे देखें: https://github.com/plank/MarkerClusterer

जब आप एक ही स्थिति में कई मार्कर रखते हैं, तो यह एक मार्कर मार्कर में एक इन्फोवॉन्ड करने के लिए संशोधित मार्कर क्लस्टर है।

आप देख सकते हैं कि यह यहाँ कैसे काम करता है: http://culturedays.ca/en/2013-activities

Answer 13

ऊपर दिए गए उत्तरों पर विस्तार करते हुए, मानचित्र की ऑब्जेक्ट को इनिशियलाइज़ करते समय बस आप अधिकतम विकल्प सेट करना सुनिश्चित करें।

Answer 14

जब उपयोगकर्ता अधिकतम में ज़ूम करता है तो ऑफ़सेट देते हुए मार्करों को दूर कर देगा। इसलिए मैंने इसे हासिल करने का एक तरीका ढूंढ लिया। यह एक उचित तरीका नहीं हो सकता है लेकिन यह बहुत अच्छी तरह से काम किया है।

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

मार्कर का zIndex सेट करें ताकि आप मार्कर आइकन देखेंगे जिसे आप शीर्ष पर देखना चाहते हैं, अन्यथा यह ऑटो स्वैपिंग जैसे मार्करों को चेतन करेगा। जब उपयोगकर्ता टैप करता है तो zIndex स्वैप का उपयोग करके मार्कर को शीर्ष पर लाने के लिए zIndex को हैंडल करें।

Answer 15

इसे कैसे दूर किया जाए .. [स्विफ्ट]

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

एक नया मार्कर बनाया जाने वाला है? जाँच करें clusterArrayऔर हेरफेर यह ऑफसेट है

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


    }

परिणाम

Answer 16

मैथ्यू फॉक्स के डरपोक जीनियस जवाब में जोड़ते हुए, मैंने मार्कर ऑब्जेक्ट सेट करते समय प्रत्येक लेट और लैंग के लिए एक छोटे यादृच्छिक ऑफसेट को जोड़ा है। उदाहरण के लिए:

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

Answer 17

ऊपर दिए गए उत्तर, जब आप स्ट्रिंग्स में शामिल हो गए, जोड़ा नहीं गया / घटाया गया स्थान (जैसे "37.12340-0.00069"), अपने मूल अक्षांश / देशांतर को फ़्लोट में कनवर्ट करें, जैसे कि पार्सफ्लोत () का उपयोग करके, फिर सुधार जोड़ें या घटाएं।