सभी दृश्य मार्करों को कवर करने के लिए केंद्र / मानचित्र का ज़ूम सेट करें?

Question

मैं अपने मानचित्र पर कई मार्कर सेट कर रहा हूं और मैं सांख्यिकीय रूप से ज़ूम स्तर और केंद्र सेट कर सकता हूं, लेकिन मैं जो चाहता हूं, वह सभी मार्करों को कवर करने और जितना संभव हो सभी बाजारों को ज़ूम करने के लिए दिखाई दे रहा है

उपलब्ध तरीके निम्नलिखित हैं

setZoom(zoom:number)

तथा

setCenter(latlng:LatLng)

न तो setCenterकई स्थान या स्थान सरणी इनपुट का समर्थन setZoomकरता है और न ही इस प्रकार की कार्यक्षमता है

Comments

देखें stackoverflow.com/questions/2362337/...

— palmsey

जब आप मार्कर जोड़ते हैं और अंतिम सीमा में फिट होने के लिए अपना नक्शा सेट करते हैं, तो आपको हर बार latlngकिसी boundsऑब्जेक्ट को जोड़ना होगा । यहां देखें जवाब: stackoverflow.com/questions/1556921/…

— Suvi Vignarajah

Answer 1

आपको fitBounds()विधि का उपयोग करने की आवश्यकता है ।

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i]);
}

map.fitBounds(bounds);

---

डेवलपर्स से दस्तावेज़ । Googlemaps / documentation/ javascript :

fitBounds(bounds[, padding])

पैरामीटर:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

वापसी मूल्य: कोई नहीं

दिए गए सीमा को देखने के लिए व्यूपोर्ट सेट करता है।
नोट : जब नक्शा सेट किया जाता है display: none, तो fitBoundsफ़ंक्शन मैप के आकार को पढ़ता है 0x0, और इसलिए कुछ भी नहीं करता है। मैप छिपाए जाने पर व्यूपोर्ट को बदलने के लिए visibility: hidden, मैप को इसमें सेट करें , जिससे मैप डिव का वास्तविक आकार सुनिश्चित हो सके।

Comments

कहाँ से आया getPositionविधि से आया है?

— प्रताप

@Pratheep - यह google.maps.Marker वर्ग का हिस्सा है; Developers.google.com/maps/documentation/javascript/…

— एडम

एक जादू की तरह काम किया! धन्यवाद

— यूसुफ एन

प्रताप जैसे ही सवाल के साथ, वहाँ से बाहर आने वाले नए लोगों के लिए एक तरफ ... आप मैप्स एपीआई के साथ अनुभव कर रहे हैं, तो आप यह जानते हैं, लेकिन आप हमेशा LatLngLiteralमार्कर उदाहरण के बजाय पास कर सकते हैं । जैसे, bounds.extend({lat: 123, lng: 456})।

— काइल बेकर

रुचि रखने वाले किसी व्यक्ति के लिए एक अतिरिक्त टिप। आप एक पैडिंग को परिभाषित कर सकते हैं fitBounds(bounds, int)जिसके उपयोग से आप मार्करों और मानचित्र किनारों (या यदि आवश्यक हो तो कम जगह) के बीच थोड़ी जगह बना सकते हैं। प्रलेखन देखें

— मिकेल्सनमाइकल

Answer 2

दिए गए उत्तर को कुछ उपयोगी ट्रिक्स के साथ विस्तारित करने के लिए:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

अद्यतन:
विषय में आगे के शोध बताते हैं कि फिटबाउंड्स () एक एसिंक्रोनस है और फिट बाउंड्स को कॉल करने से पहले परिभाषित श्रोता के साथ ज़ूम हेरफेर करना सबसे अच्छा है।
धन्यवाद @Tim, @ xr280xr, इस विषय पर और उदाहरण: SO: setzoom-after-fitbounds

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);

Comments

अच्छा जोड़। धन्यवाद!

— paneer_tikka

मुझे .getZoom () द्वारा अपरिभाषित लौटाया जा रहा था। इस उत्तर ने मुझे इसका उपयोग addListenerOnceशुरू zoom_changedकरने के बाद ज़ूम सेट करने के लिए इसे हल करने में मदद की ।

— xr280xr

धन्यवाद @ d.raev लेकिन जब सीमाएं पहले से निर्धारित हैं तो अधिकतम ज़ूम सेट करना काम नहीं करता है। अपने नक्शे को शुरू करते समय आपको "मैक्सजूम" विकल्प सेट करना होगा। Developers.google.com/maps/documentation/javascript/…

— टिम

ज़ूम मैनिपुलेशन ( UPDATE ) के भाग में , आप एक युगल संस्करण और स्कोप मिला रहे हैं। आप का उपयोग करें yourMap, mapऔर this। शायद इसे और अधिक सुसंगत बनाने के लिए यह एक अच्छा विचार है।

— गुस्तावो स्ट्रॉब

Answer 3

सरणी का आकार शून्य से अधिक होना चाहिए। Οअर्थात आपके पास अप्रत्याशित परिणाम होंगे।

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

Answer 4

Google मानचित्र डेवलपर के लेखों के अनुसार यह MarkerClustererक्लाइंट साइड यूटिलिटी गूगल मैप के लिए उपलब्ध है , यहां बताया गया है कि इसका क्या उपयोग है:

आपके द्वारा मांगे जाने के लिए कई दृष्टिकोण हैं:

• ग्रिड आधारित क्लस्टरिंग
• दूरी आधारित क्लस्टरिंग
• व्यूपोर्ट मार्कर प्रबंधन
• फ्यूजन टेबल्स
• मार्कर क्लस्टर
• MarkerManager

आप ऊपर दिए गए लिंक पर उनके बारे में पढ़ सकते हैं।

Marker Clustererग्रिड के इच्छुक सभी मार्करों को क्लस्टर करने के लिए ग्रिड आधारित क्लस्टरिंग का उपयोग करता है । ग्रिड-आधारित क्लस्टरिंग मानचित्र को एक निश्चित आकार (प्रत्येक ज़ूम पर आकार में परिवर्तन) के वर्गों में विभाजित करके और फिर प्रत्येक ग्रिड स्क्वायर में मार्करों को समूहीकृत करके काम करता है।

क्लस्टरिंग से पहले

क्लस्टरिंग के बाद

मुझे आशा है कि यह वही है जिसे आप ढूंढ रहे थे और इससे आपकी समस्या हल हो जाएगी :)