दिलचस्प पोस्ट
जावास्क्रिप्ट संपत्ति का केस-असंवेदनशील रूप से पहुंचें? एंड्रॉइड जेडीबीसी काम नहीं कर रहा है: चालक पर क्लासनोटफ़ाउंड अपवाद हिम तेंदुए पर जावा jdk 7 कैसे स्थापित करें यह कैसे पहचानें कि आप वीएम के तहत चल रहे हैं? एक विविधतापूर्ण टेम्पलेट फ़ंक्शन के विषम तर्क पैक पर जेनेरिक कंप्यूटेशन कैसे करें? सूची दृश्य सूची को अद्यतन करने के बाद सूची के अंत तक स्क्रॉल करें दृश्य स्टूडियो – शॉर्टकट को प्रोसेस करने के लिए संलग्न करें संदर्भ से कब और कब सी + + में पॉइंटर से गुजारें? मैं datetime.strptime के साथ अवधि (AM / PM) के लिए कैसे खाता करूं? Mod_rewrite की छिपी हुई विशेषताओं क्या नंबरों को इंटीजर्स में बदलने का कोई तरीका है? क्या यह जांचना संभव है कि क्या फेसबुक पर ईमेल की पुष्टि हो रही है? वसंत और हाइबरनेट: वर्तमान थ्रेड के लिए कोई सत्र नहीं मिला आईफोन फेसबुक वीडियो अपलोड जावास्क्रिप्ट का सबसे अधिक पूर्णांक मान क्या है, जो सटीकता को खोने के बिना एक नंबर पर जा सकता है?

गूगल मानचित्र एपीआई वी 3 – सटीक एक ही जगह पर कई मार्कर

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

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

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

Solutions Collecting From Web of "गूगल मानचित्र एपीआई वी 3 – सटीक एक ही जगह पर कई मार्कर"

ओवरलैपिंग माकर्सस्पिडरफ़ीयर पर एक नज़र डालें।
एक डेमो पृष्ठ है, लेकिन वे मार्करों को नहीं दिखाते हैं जो एक ही स्थान पर हैं, केवल कुछ जो एक साथ बहुत करीब हैं

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

यह आपकी समस्या का सही समाधान है।

मार्करों को ऑफसेट करने का कोई वास्तविक समाधान नहीं है, यदि वे एक ही इमारत में स्थित हैं। आप क्या करना चाहते हैं, इस तरह से मार्करक्लस्ट्रेटर। जेएस को संशोधित करें:

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

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

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

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

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

मैंने पाया कि, मेरे अक्षांश (52 डिग्री उत्तरी) के लिए, सर्कल त्रिज्या कार्य के 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; } }; 

@ इग्नाटियस, सबसे उत्कृष्ट उत्तर, मार्करक्लस्टरएरप्लस के 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. उसके बाद, अपने प्रारंभिक () फ़ंक्शन में जहां आप मानचित्र को इनिशियलाइज़ करते हैं और अपना मार्करक्लस्टर ऑब्जेक्ट घोषित करते हैं:

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

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

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

मैं इसे 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); 

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

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

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

यहां मेरे 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 चर से मुझे यादृच्छिक रूप से छोटा करने के लिए 10000000 तक 10000000 द्वारा यादृच्छिक विभाजन करना था, जो कि बेतरतीब ढंग से छोटा था, बस मार्करों को मुश्किल से आगे बढ़ने के लिए। अपनी आवश्यकताओं के लिए अधिक सटीक रूप से प्राप्त करने के लिए उस चर के साथ टिंकर करने के लिए स्वतंत्र महसूस करें

वी 3 के लिए मार्कर क्लस्टरर को देखें – यह लाइब्रेरी क्लस्टर एक समूह मार्कर में पास के बिंदु हैं। जब क्लस्टर क्लिक किए जाते हैं तो नक्शा ज़ूम हो जाता है मैं कल्पना करता हूं कि जब आप में जूम की गई थी, तब भी उसी स्थान पर मार्करों के साथ भी यही समस्या है।

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 

यह जांचें: https://github.com/plank/MarkerClusterer

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

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

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

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

 // 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 को संभाला।

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

 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-realworld.10000.html और यह ओपन-सोर्स है।

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

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

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

(मुझे पता चला कि 25000 से विभाजित करने से पर्याप्त जुदाई हो रही है, लेकिन सटीक स्थान से विशिष्ट रूप से मार्कर को स्थानांतरित नहीं करता जैसे एक विशिष्ट पता)

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

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

एक सच्चे आईटी पेशेवर इस तरह के डेटा को हेरफेर नहीं करेगा

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

मेरे पास इस का सबसे अच्छा उदाहरण Google के पक्ष पर अपना डेटा प्रक्रिया करता है, न कि स्वयं का।