গুগল ম্যাপস ভি 3 ফিটবাউন্ডস () একক চিহ্নিতকারীর জন্য খুব বেশি জুম


94

সর্বাধিক জুম স্তর নির্ধারণের জন্য কি কোনও উপায় আছে fitBounds()? আমার সমস্যাটি হ'ল যখন মানচিত্রটি কেবলমাত্র একটি স্থানকে খাওয়ানো হয়, এটি যতদূর যেতে পারে সেখানে জুম করে which যা মানচিত্রটিকে প্রকৃতপক্ষে প্রসঙ্গের বাইরে নিয়ে যায় এবং এটি অকেজো করে দেয়। আমি সম্ভবত ভুল পদ্ধতির গ্রহণ করছি?

আগাম ধন্যবাদ!


4
stackoverflow.com/questions/4523023/… একটি আরও ভাল সমাধান। বিশেষত @ নিউকিন্স উত্তর
কেনেট

উত্তর:


140

আমি এমআরটির সমাধানটি পছন্দ করি (বিশেষত যখন আপনি জানেন না আপনি কয়টি পয়েন্টের জন্য ম্যাপিং বা সামঞ্জস্য করবেন) তবে এটি চিহ্নিতকারীকে ফেলে দেয় যাতে এটি আর মানচিত্রের কেন্দ্রে না থাকে। আমি কেবল এটি ল্যাট এবং এলএনজি থেকে .01 বিয়োগ করে একটি অতিরিক্ত পয়েন্ট দ্বারা প্রসারিত করেছি, সুতরাং এটি চিহ্নিতকারীটিকে কেন্দ্রে রাখে। দুর্দান্ত কাজ, ধন্যবাদ মিঃ!

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

}

4
মূল কেন্দ্রটি রাখার বিষয়ে ভাল ধারণা। fitBounds()পদ্ধতিটি ব্যবহার করার সময় জুম স্তরটি নির্ভরযোগ্যতার সাথে সামঞ্জস্য করা যায় না তার কারণ হ'ল জুমটি তাত্পর্যপূর্ণভাবে ঘটছে: স্ট্যাকওভারফ্লো
মেট্রো স্মুরফ

4
এটি আমার জন্য কাজ করে মহান। আমাকে ভি 3 এ "ফাংশন ফিট টোমার্কার্স (মার্কারস, ম্যাপ)" ফাংশনে মানচিত্রের রেফারেন্সটি পাস করতে হয়েছিল, তবে এটি এর পরে মনোমুগ্ধকর মতো কাজ করে!
শেন

4
ভালোলাগে সেটা. ভাল একটি @ryan। আমার জন্য দুর্দান্ত কাজ করেছে, কিন্তু .01 আমার ক্ষেত্রে খুব বেশি জুম করেছে, .001 মিষ্টি স্পটে আঘাত করে।
willdanceforfun

ধন্যবাদ @ উইলড্যান্সফারফুন একই ক্ষেত্রে, 001 স্পটটিতে আঘাত করে।
গোরান জাকোভেলজেভিচ

4
আমি এই সমাধান সুপারিশ করবে stackoverflow.com/questions/2437683/...
NinjaOnSafari

40

আপনি আপনার মানচিত্র সেটআপ করতে পারেন maxZoomমধ্যে MapOptions (API-রেফারেন্স) ভালো:

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

এটি ব্যবহার করার সময় মানচিত্রটিকে আরও বেশি fitBounds()জুম করা থেকে দূরে রাখবে এবং এমনকি জুম নিয়ন্ত্রণ থেকে জুম স্তরগুলি সরিয়ে ফেলবে।


@ ক্যান্ডলেজ্যাক ঠিক আমার উত্তরে বর্ণিত হিসাবে?
ফ্লাইজেনারিং

8
আপনি maxZoomবাউন্ডস ফিট করার আগে সেটটি সেট করতে পারেন এবং তারপরে সীমানা পরিবর্তন করে ফায়ার করা ইভেন্টটি ব্যবহার map.setOptions({ maxZoom: undefined })করে এটি আবার আনসেট করতে পারেন idle। এটি জুম ইনকে বাধা দেয়, idleইভেন্টের পরিবর্তে জুমটিকে পুনরায় সেট করার জুম আউট কার্যকর করবে ।
এল ইয়োব

29

আরেকটি সমাধান হ'ল সীমাগুলি প্রসারিত করা যদি আপনি ফিটবাউন্ডগুলি কার্যকর করার আগে (তারা) খুব ছোট হয় তবে:

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

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

ম্যাক্সজুম বিকল্পটি ব্যবহার করা আপনার কাছে থাকা চিহ্নগুলিতে জুম না বাড়ানোর পক্ষে সবচেয়ে ভাল কাজ করে।


কল্পনাপ্রসূত! জীবন রক্ষাকারী!
জয়পি

19

একবার আপনি সমস্ত বাস্তব সীমানা যুক্ত করার পরে এই লাইনগুলি যুক্ত করুন

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

এটি আসল সীমানার কেন্দ্রটি পায় এবং তারপরে দুটি উত্তর পয়েন্ট যুক্ত করে একটি উত্তর-পূর্বে এবং একটি আপনার কেন্দ্রের দক্ষিণ-পশ্চিমে

এটি কার্যকরভাবে সর্বনিম্ন জুম সেট করে, জুম বাড়াতে বা হ্রাস করতে অফসেটের মান পরিবর্তন করে



11

আপনি ব্যবহার করতে পারেন

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

এইভাবে আপনি মানচিত্রের বৈশিষ্ট্যাবলী সেট করার পরে মানচিত্র শুরু হওয়ার পরে .... আপনি যতবার চান সেগুলি সেট করতে পারেন ... তবে আপনার ক্ষেত্রে ... আপনি সেগুলি ফিটবাউন্ডের আগে সেট করতে পারেন ()

শুভকামনা, রাতু


7

আমি মানচিত্রটিকে দূর থেকে জুম করা থেকে বাধা দেওয়ার উপায়টি এই কোডের লাইনটি যুক্ত করে:

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- এ এই ব্লগ পোস্টে আমি লিখেছিলাম সম্পর্কে কেবল একটি মন্তব্য করুন এক-একক-মার্কার-এ-খুব-কাছাকাছি-জুমিং-থেকে-মানচিত্র


4
আমি এই সমাধানটি পছন্দ করি তবে প্রতিবার এটি কল না করার জন্য সেটজুমটি সন্নিবেশ করান। এছাড়াও সময় নির্ধারণের পার্শ্ব প্রতিক্রিয়া হতে পারে যা getzoom () থেকে 'অপরিবর্তিত' ফিরে আসে। সমাধান: জুম = map.getZoom (); যদি (টাইপফুল জুম! == 'অপরিজ্ঞাত' && জুম> 8) map.setZoom (8);
লে ড্রয়েড

5

আমি এমআরটি এর সমাধানটি সত্যিই পছন্দ করি এবং এটির সাথে পুরোপুরি কার্যকর হয় যদি আপনার সাথে কাজ করার জন্য কেবল একটি পয়েন্ট থাকে। তবে আমি দেখতে পেলাম যে যদি বাউন্ডিং বাক্সটি কোনও বিন্দুর উপর ভিত্তি করে না হয় তবে পয়েন্টগুলি খুব কাছাকাছি থাকলে এটি এখনও ম্যাপটিকে খুব বেশি দূরে জুম করতে পারে।

পয়েন্টগুলি একে অপরের সংজ্ঞায়িত দূরত্বের মধ্যে আছে কিনা তা প্রথমে যাচাই করার জন্য এখানে একটি উপায় রয়েছে, তারপরে সেগুলি যদি সর্বনিম্ন দূরত্বের চেয়ে ছোট হয় তবে সেই সর্বনিম্ন দূরত্বের দ্বারা সীমানা প্রসারিত করুন:

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

আশা করি এটি কাউকে সাহায্য করবে!


3

এটি আপনাকে সীমানা ফিটিংয়ের উপর সর্বোচ্চ অনুমোদিত জুমের উপরে সরাসরি নিয়ন্ত্রণ দেয়।

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

3

আমার ছেলেরা হিসাবে ফিটবাউন্ডগুলির পরে অলস ইভেন্ট তৈরি করে এটি সমাধান করি। নিখুঁতভাবে কাজ করা। অনুমান করুন যে এটি এখানে সবচেয়ে পরিষ্কার সমাধানগুলির মধ্যে একটি

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

2

গুগল ম্যাপস ভি 3 ইভেন্ট চালিত হওয়ায় আমি এই খণ্ডটি সমাধান করেছি:

জুম_চেন্জড ইভেন্টটি ট্রিগার করার সময় আপনি যথাযথ পরিমাণে জুমটি সেট করতে আপনি API কে বলতে পারেন :

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 এর বেশী কোনো জুম ঘটনা ব্যবহারকারীর জন্য অসম্ভব।


1

fitBounds()পদ্ধতি কল করার পরে , আবার জুম স্তর সেটআপ করার চেষ্টা করুন। এটি সঠিক জায়গায় কেন্দ্রে থাকা অবস্থায় মানচিত্রটিকে সেই জুম স্তরে থাকতে বাধ্য করবে।


0

ফিটিং সীমা যখন সীমাবদ্ধ সর্বাধিক জুম সীমাবদ্ধ উপর ভিত্তি করে আমার আত্মাচরণ আছে। আমার জন্য কাজ করে (উইন 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);
    }
});

0

এবং .. এখানে অন্য এক।
এমআরটি এবং রায়ান হিসাবে একই ধারণা, তবে

  • সীমানা আকার ঠিক শূন্য না হলে এছাড়াও কাজ করে (*)
  • খুঁটির কাছে বিকৃতি রোধ করে
  • 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;
}

সম্পাদনা: আমার অনুপাত প্রক্ষেপণ আছে তা বিবেচনা করে আমার অনুপাতের গণনা সঠিকভাবে হয় কিনা তা আমি নিশ্চিত নই। আমি এটি আবার সম্পাদনা করতে পারে ..


0

এটি ইতিমধ্যে এখানে গুগল ম্যাপ v3 এর উত্তর দিয়েছে : মিনিট জোর করে। ফিটবাউন্ডগুলি ব্যবহার করার সময় জুম স্তরটি এটি প্রত্যাশার মতো কাজ করে :) তাই এখন যদি ফিটের সীমানার পরে জুম কম হয় তবে 13 বলে দিন আপনি নতুন জুম সেট করতে পারেন যা আপনি প্রিফার করেন


-1

এখানে একটি সমাধানে আমার যেতে যা, যখন দুটি চিহ্নিতকারী খুব কাছাকাছি থাকে তখন এটিও কাজ করে। কার্যকর সর্বোচ্চ জুম স্তর উভয় পরিস্থিতিতে একই। সুতরাং যখন একাধিক চিহ্নিতকারী থাকে তখন আমরা অবিচ্ছিন্নভাবে জুম শেষ করি না

প্রভাবটি আবার সর্বাধিক জুম নিশ্চিত করছে, ম্যাকজুম বিকল্পটি ব্যবহার না করেই সম্ভবত এটি জুম নিয়ন্ত্রণের মাধ্যমে সর্বোচ্চ জুম স্তরের চেয়ে আরও বেশি জুম করা সম্ভব করার অযাচিত প্রভাব ফেলেছে

আমি আগেই ম্যাক্সল্যাট, মিনিট ল্যাট, ম্যাক্সএলএনজি এবং মিনলং গণনা করেছি ...

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,
});
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.