Google मानचित्र v3 fitBounds () ज़ूम एकल मार्कर के लिए बहुत करीब है

Question

क्या अधिकतम ज़ूम स्तर निर्धारित करने का कोई तरीका है fitBounds()? मेरी समस्या यह है कि जब मानचित्र को केवल एक स्थान खिलाया जाता है, तो वह जहाँ तक जा सकता है, वहां तक ​​पहुँचता है, जो वास्तव में नक्शे को संदर्भ से बाहर ले जाता है और उसे बेकार कर देता है। शायद मैं गलत दृष्टिकोण ले रहा हूं?

अग्रिम में धन्यवाद!

Comments

stackoverflow.com/questions/4523023/… एक बेहतर समाधान है। विशेष रूप से @Nequins जवाब

— केनेट

Answer 1

मुझे mrt का समाधान पसंद है (विशेषकर जब आपको पता नहीं है कि आप कितने बिंदुओं की मैपिंग या समायोजन कर रहे हैं), इसके अलावा यह मार्कर को फेंक देता है ताकि यह मानचित्र के केंद्र में न रहे। मैंने बस इसे एक अतिरिक्त बिंदु घटाना द्वारा बढ़ाया ।01 अव्यक्त से और साथ ही साथ, इसलिए यह मार्कर को केंद्र में रखता है। महान काम करता है, धन्यवाद mrt!

// Pan & Zoom map to show all markers
function fitToMarkers(markers) {

    var bounds = new google.maps.LatLngBounds();

    // Create bounds from markers
    for( var index in markers ) {
        var latlng = markers[index].getPosition();
        bounds.extend(latlng);
    }

    // Don't zoom in too far on only one marker
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
       var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
       var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
       bounds.extend(extendPoint1);
       bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);

    // Adjusting zoom here doesn't work :/

}

Comments

मूल केंद्र रखने पर अच्छा विचार है। fitBounds()विधि का उपयोग करते समय ज़ूम स्तर को मज़बूती से समायोजित नहीं किया जा सकता है क्योंकि ज़ूम असिंक्रोनस रूप से हो रहा है: stackoverflow.com/questions/2989858/…

— मेट्रो Smurf

यह मेरे लिए बहुत अच्छा काम किया। मुझे V3 पर "फ़ंक्शन फ़िटटॉकर्स (मार्कर, मानचित्र)" फ़ंक्शन में मानचित्र संदर्भ पास करना पड़ा, लेकिन यह उसके बाद एक आकर्षण की तरह काम करता है!

— शेन

उसे प्यार करो। अच्छा एक @ आर्यन। मेरे लिए बहुत अच्छा काम किया, लेकिन .01 मेरे मामले में बहुत दूर ज़ूम आउट किया ।001 ने मीठा स्थान मारा।

— मई

धन्यवाद। @Willdanceforfun एक ही मामले की तरह, 001 मौके पर पहुंच गया।

— गोरान जैकोवल्ज़ेविक

मैं इस समाधान का सुझाव

— दूँगा

Answer 2

आप के साथ अपने नक्शे सेटअप कर सकते हैं maxZoomमें MapOptions ^{(एपीआई-संदर्भ)} इस तरह:

var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 });

यह उपयोग करते समय किसी भी गहरे ज़ूम करने से मैप को बनाए रखेगा fitBounds()और ज़ूम स्तर को ज़ूम कंट्रोल से भी हटा देगा।

Comments

@candlejack मेरे उत्तर में वर्णित है?

— फ्लाईग्रेनिंग

आप maxZoomसीमा को फिट करने से पहले सेट कर सकते हैं और फिर इसे बदलकर फिर से map.setOptions({ maxZoom: undefined })उस idleघटना का उपयोग कर सकते हैं जो सीमा को बदलकर निकाल दिया गया है। यह ज़ूम इन को रोकता है, ज़ूम इन होने की स्थिति में ज़ूम को रीसेट करने के प्रभाव को रोकता है idle।

— एल योबो

Answer 3

एक और उपाय यह है कि यदि आप फिट होने से पहले सीमा से बहुत छोटे हैं तो उनका पता लगाने के लिए सीमा का विस्तार करें।

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like
// ...
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
   bounds.extend(extendPoint);
}
map.fitBounds(bounds);

Answer 4

var map = new google.maps.Map(document.getElementById("map"), { maxZoom: 10 });

MaxZoom विकल्प का उपयोग करना आपके पास मौजूद चिह्नों को बंद न करने के लिए सबसे अच्छा काम करता है।

Comments

बहुत खुबस! जीवन रक्षक!

— जेपी

Answer 5

एक बार जब आप सभी वास्तविक सीमाएँ जोड़ लेते हैं तो इन पंक्तियों को जोड़ते हैं

var offset = 0.002;     
var center = bounds.getCenter();                            
bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset));
bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset));

यह वास्तविक सीमा के केंद्र को प्राप्त करता है और फिर दो अतिरिक्त बिंदुओं को पूर्वोत्तर में और एक को आप केंद्र के दक्षिण-पश्चिम में जोड़ता है

यह प्रभावी रूप से न्यूनतम ज़ूम सेट करता है, ज़ूम को बढ़ाने या घटाने के लिए ऑफ़सेट का मूल्य बदलें

Answer 6

यदि यह एकल स्थान के लिए है, तो आप इसके बजाय सेटकेंटर () और सेटज़ूम () का उपयोग कर सकते हैं।

Comments

सबसे आसान समाधान

— अल्बर्टो एम

Answer 7

आप उपयोग कर सकते हैं

map.setOptions({
    maxZoom: [what u want],
    minZoom: [what u want]
});

इस तरह यू ने मानचित्र के गुण को मानचित्रण के बाद आरम्भ कर दिया है .... यू उन्हें जितनी बार चाहे उतने सेट कर सकते हैं ... लेकिन उर मामले में ... यू उन्हें फिटबाउंड () से पहले सेट कर सकते हैं

गुड लक, rarutu

Answer 8

जिस तरह से मैं मानचित्र को कोड की इस पंक्ति को जोड़कर दूर तक ज़ूम करने से रोकता हूं:

var zoomOverride = map.getZoom();
        if(zoomOverride > 15) {
        zoomOverride = 15;
        }
      map.setZoom(zoomOverride);

इस लाइन के बाद सीधे:

map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));

जो भी स्तर आप नक्शे को ज़ूम करने के लिए नहीं चाहते ज़ूम स्तर को बदलने के लिए स्वतंत्र महसूस करें।

अगर आपको कोई समस्या या सवाल है, तो बस मुझे इस बारे में http://icode4you.net/creating-your-own-store-locator-map-how-to-prevent-the- पर लिखे ब्लॉग पोस्ट पर एक टिप्पणी छोड़ दें नक्शा-से-ज़ूम-इन के लिए भी करीब-ऑन-ए-एकल मार्कर

Comments

मैं इस समाधान को पसंद करता हूं, लेकिन सेटज़ूम को अंदर डालें यदि इसे हर बार नहीं बुलाया जाए। एक समय पक्ष प्रभाव भी हो सकता है जो गेटज़ूम () से 'अपरिभाषित' लौटाता है। समाधान: ज़ूम = map.getZoom (); if (टाइपऑफ ज़ूम! == 'अपरिभाषित' और& ज़ूम> 8) map.setZoom (8);

— Le Droid

Answer 9

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

यहां पहले जांचने का एक तरीका है कि अंक एक-दूसरे की निर्धारित दूरी के भीतर हैं, तो यदि वे उस न्यूनतम दूरी से छोटे हैं, तो उस न्यूनतम दूरी से सीमा का विस्तार करें:

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like

// ...

var minDistance = 0.002;
var sumA = bounds.getNorthEast().lng() - bounds.getSouthWest().lng();
var sumB = bounds.getNorthEast().lat() - bounds.getSouthWest().lat();

if((sumA < minDistance && sumA > -minDistance) 
&& (sumB < minDistance && sumB > -minDistance)){
var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + minDistance, bounds.getNorthEast().lng() + minDistance);
    var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - minDistance, bounds.getNorthEast().lng() - minDistance);
    bounds.extend(extendPoint1);
    bounds.extend(extendPoint2);
}

आशा है कि यह किसी की मदद करता है!

Answer 10

यह आपको सीमा फिटिंग पर अधिकतम अनुमत ज़ूम पर सीधा नियंत्रण प्रदान करता है।

var fitToMarkers = function(map, markers, maxZoom) {
    if (typeof maxZoom == 'undefined') maxZoom = 15;

    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom() > maxZoom) {
            this.setZoom(maxZoom);
        }
    });

    var bounds = new google.maps.LatLngBounds();
    for (var m = 0; m < markers.length; m++) {
        var marker = markers[m];
        var latlng = marker.getPosition();
        bounds.extend(latlng);
    }

    map.fitBounds(bounds);
};

Answer 11

मेरे लिए जैसे कि मैं लोग इसे फिटबाउंड्स के बाद एक बेकार घटना बनाकर हल करते हैं। पूरी तरह से काम करना। लगता है कि यहाँ सबसे साफ समाधान में से एक है

var locations = [['loc', lat, lng], ['loc', lat, lng]];
.....
for (i = 0; i < locations.length; i++) { 
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10
  });
  .... create markers, etc.
}
....
map.fitBounds(bounds);  
google.maps.event.addListenerOnce(map, 'idle', function() {
  if (locations.length == 1) {
    map.setZoom(11);
  }
});

Answer 12

मैंने इस चंक के साथ हल किया, क्योंकि Google मैप्स V3 इवेंट संचालित है:

जब आप zoom_changed ईवेंट ट्रिगर करते हैं तो आप ज़ूम को एक उचित राशि पर वापस सेट करने के लिए कह सकते हैं :

var initial = true
google.maps.event.addListener(map, "zoom_changed", function() {
    if (intial == true){
       if (map.getZoom() > 11) {
         map.setZoom(11);
         intial = false;
       }
    }
}); 

मैं प्रयोग किया जाता आरंभिक मेकअप नक्शा बहुत ज्यादा लोड हो रहा है जूमिंग नहीं जब अंतिम fitBounds permorfed, इसके बिना 11 से अधिक किसी भी जूम घटना उपयोगकर्ता के लिए असंभव हो जाएगा।

Answer 13

कॉलिंग fitBounds()विधि के बाद , ज़ूम स्तर को फिर से सेटअप करने का प्रयास करें। यह मानचित्र को उस ज़ूम स्तर पर होने के लिए बाध्य करेगा, जबकि वह सही जगह पर केंद्रित हो।

Answer 14

फिटिंग सीमा के दौरान अधिकतम ज़ूम को सीमित करने के आधार पर मेरे पास आत्मा है। मेरे लिए काम करता है (विन 7 पर परीक्षण - IE 9, एफएफ 13, क्रोम 19):

// When fitting bounds:
var bounds = new google.maps.LatLngBounds();
// ...
// extend bounds as you like
// ..

// now set global variable when fitting bounds
window.fittingBounds = true;
map.fitBounds(bounds);
window.fittingBounds = false;


// attach this event listener after map init
google.maps.event.addListener(map, 'zoom_changed', function() {
    // set max zoom only when fitting bounds
    if (window.fittingBounds && map.getZoom() > 16) {
        this.setZoom(16);
    }
});

Answer 15

और .. यहाँ एक और है।
Mrt और रयान के रूप में एक ही विचार है, लेकिन

• यह भी काम करता है कि सीमा का आकार बिल्कुल शून्य नहीं है (*)
• ध्रुवों के पास विकृति को रोकता है
• getNorthEast () के बजाय getCenter () का उपयोग करता है

(*) नोट: यदि बॉक्स पहले से ही काफी बड़ा है, तो उन दो अतिरिक्त बिंदुओं को जोड़ने का कोई प्रभाव नहीं होना चाहिए। इसलिए हमें किसी और जाँच की आवश्यकता नहीं है।

function calcBounds(markers) {
  // bounds that contain all markers
  var bounds = new google.maps.LatLngBounds();
  // Using an underscore _.each(). Feel free to replace with standard for()
  _.each(markers, function(marker) {
    bounds.extend(marker.getPosition());
  });
  // prevent lat/lng distortion at the poles
  var lng0 = bounds.getNorthEast().lng();
  var lng1 = bounds.getSouthWest().lng();
  if (lng0 * lng1 < 0) {
    // Take the cos at the equator.
    var cos = 1;
  }
  else {
    var cos0 = Math.cos(lng0);
    var cos1 = Math.cos(lng1);
    // Prevent division by zero if the marker is exactly at the pole.
    var cos_safe = Math.max(cos0, cos1, 0.0001);
  }
  var cos0 = Math.cos(bounds.getNorthEast.lng() * Math.PI / 180);
  var cos1 = Math.cos(bounds.getSouthWest.lng() * Math.PI / 180);
  // "radius" in either direction.
  // 0.0006 seems to be an ok value for a typical city.
  // Feel free to make this value a function argument.
  var rLat = 0.0006;
  var rLng = rLat / cos_safe;
  // expand the bounds to a minimum width and height
  var center = bounds.getCenter();
  var p0 = new google.maps.LatLng(center.lat() - rLat, center.lng() - rLng);
  var p1 = new google.maps.LatLng(lat.center() + rLat, center.lng() + rLng);
  bounds.extend(p0);
  bounds.extend(p1);
  return bounds;
}

संपादित करें: यदि मेरा मर्केटर प्रोजेक्शन है, तो यह देखते हुए कि मेरा अनुपात गणना सही है, मुझे बिल्कुल यकीन नहीं है। मैं इसे फिर से संपादित कर सकता हूं।

Answer 16

इसका पहले से ही यहाँ उत्तर दिया गया है गूगल मैप्स v3: एनफोर्सिंग मिन। ज़ूम स्तर जब फ़िटबाउंड्स का उपयोग करता है, तो यह अपेक्षित के रूप में काम करता है :) तो अब अगर फिट सीमा के बाद ज़ूम कम है, तो 13 कहते हैं तो आप नए ज़ूम सेट कर सकते हैं जो आप प्रीफ़र करते हैं

Answer 17

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

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

मैंने पहले से मैक्सलेट, मिनलैट, मैक्सलिंग और मिनलंग की गणना की है ...

var minLatSpan = 0.002;
if (maxLat - minLat < minLatSpan) {
  // ensures that we do not zoom in too much
  var delta = (minLatSpan - (maxLat - minLat)) / 2;
  maxLat += delta;
  minLat -= delta;
}

map.fitBounds({
  east: maxLng,
  west: minLng,
  north: maxLat,
  south: minLat,
});