সমস্ত দৃশ্যমান চিহ্নিতকারীকে কভার করতে কেন্দ্র / মানচিত্রের জুম সেট করুন?


352

আমি আমার মানচিত্রে একাধিক চিহ্নিতকারী স্থাপন করছি এবং আমি স্থিরভাবে জুম স্তর এবং কেন্দ্র নির্ধারণ করতে পারি তবে আমি যা চাই তা হ'ল সমস্ত মার্কারকে coverাকতে এবং যতটা সম্ভব সমস্ত বাজার দৃশ্যমান করে জুম করা

উপলব্ধ পদ্ধতি অনুসরণ করা হয়

setZoom(zoom:number)

এবং

setCenter(latlng:LatLng)

setCenterএকাধিক অবস্থান বা অবস্থান অ্যারে ইনপুট সমর্থন করে না বা setZoomএই ধরণের কার্যকারিতা নেই

এখানে চিত্র বর্ণনা লিখুন



প্রতিবার আপনি যখন একটি মার্কার যুক্ত করবেন তখন latlngআপনাকে কোনও boundsঅবজেক্টে যুক্ত করতে হবে এবং চূড়ান্ত সীমানায় ফিট করার জন্য আপনার মানচিত্রটি সেট করতে হবে। উত্তরটি এখানে দেখুন: স্ট্যাকওভারফ্লো.
com/

উত্তর:


678

আপনার 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);

বিকাশকারীদের থেকে ডকুমেন্টেশন / ম্যাপস / ডকুমেন্টেশন / জাভাস্ক্রিপ্ট :

fitBounds(bounds[, padding])

পরামিতি:

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

ফেরতের মান: কোনওটি নয়

প্রদত্ত সীমাগুলি ধারণ করতে ভিউপোর্টকে সেট করে।
নোট : মানচিত্রে সেট করা হলে display: none, fitBoundsফাংশন মানচিত্রের আকার সার্চ 0x0, সেইজন্য এবং কিছু না। মানচিত্রটি লুকিয়ে থাকার সময় ভিউপোর্টটি পরিবর্তন করতে মানচিত্রটি সেট করুন visibility: hidden, যার মাধ্যমে মানচিত্র ডিভের প্রকৃত আকার রয়েছে তা নিশ্চিত করুন।


3
getPositionকোথা থেকে এই পদ্ধতিটি এসেছে?
পৃথীপ

6
@ প্রিথিপ - এটি google.maps.Marker শ্রেণীর অংশ; developers.google.com/maps/docamentation/javascript/…
অ্যাডাম

মোহন মত কাজ! ধন্যবাদ
জোসেফ এন।

9
প্রথমদিকে যেমন একই প্রশ্ন সেখানে নবজাতকদের জন্য আলাদা আলাদাভাবে ... আপনি যদি মানচিত্রের এপিআই নিয়ে অভিজ্ঞ হন তবে আপনি এটি জানেন তবে আপনি সর্বদা LatLngLiteralমার্কারের উদাহরণ না দিয়ে পাস করতে পারেন । যেমন bounds.extend({lat: 123, lng: 456}),।
কাইল বেকার

1
আগ্রহী প্রত্যেকের জন্য একটি অতিরিক্ত টিপ। আপনি এমন একটি প্যাডিং ব্যবহার করে সংজ্ঞায়িত করতে পারেন fitBounds(bounds, int)যা আপনাকে চিহ্নিতকারী এবং মানচিত্রের প্রান্তগুলির মধ্যে (বা আপনার প্রয়োজনে কম স্থান) এর মধ্যে কিছুটা জায়গা রাখবে will ডকুমেন্টেশন দেখুন
মিকেলসনমিশেল

178

কয়েকটি কার্যকর কৌশল দ্বারা প্রদত্ত উত্তরটি প্রসারিত করতে:

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

আপডেট:
বিষয়টিতে আরও গবেষণা দেখায় যে ফিটবাউন্ডস () একটি অ্যাসিনক্রোনিক এবং ফিট সীমাগুলিকে কল করার আগে শ্রোতাদের সাথে জুম হেরফের করা ভাল।
ধন্যবাদ @ টিম, @ xr280xr, বিষয়টির আরও উদাহরণ: এসও: সেটজুম-পরে-ফিটবাউন্ডস

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

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

4
ভাল সংযোজন। ধন্যবাদ!
পনির_টিকা

1
.GetZoom () এর মাধ্যমে আমি অপরিবর্তিত ছিলাম। এই উত্তরটি আমাকে জুমটির মান শুরু করার পরে সেট করার জন্য এটি ব্যবহার addListenerOnceকরে সমাধান করতে সহায়তা করে zoom_changed
xr280xr

1
ধন্যবাদ @ ডি.রায়েভ তবে সীমানা ইতিমধ্যে সেট করা থাকলে সর্বাধিক জুম সেট করা কাজ করে না। আপনার মানচিত্র শুরু করার সময় আপনাকে যা করতে হবে তা হল "ম্যাক্সজুম" বিকল্পটি সেট করা। developers.google.com/maps/docamentation/javascript/…
টিম

1
জুম ম্যানিপুলেশন ( আপডেট ) সম্পর্কে অংশে আপনি কয়েকটি দাগ এবং স্কোপ মিশ্রিত করছেন। আপনি ব্যবহার করুন yourMap, mapএবং this। এটিকে আরও ধারাবাহিক করা সম্ভবত একটি ভাল ধারণা।
গুস্তাভো স্ট্রাউব

11

অ্যারের আকার অবশ্যই শূন্যের চেয়ে বড় হতে হবে। অন্যদিকে আপনার অপ্রত্যাশিত ফলাফল হবে।

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

8

MarkerClustererগুগল ম্যাপের জন্য এখানে ক্লায়েন্টের সাইড ইউটিলিটি উপলব্ধ রয়েছে যেখানে গুগল ম্যাপ বিকাশকারী নিবন্ধগুলিতে এখানে উল্লেখ করা হয়েছে , এর ব্যবহারটি এখানে সংক্ষেপে বলা হয়েছে:

আপনি যা চেয়েছিলেন তা করার জন্য অনেকগুলি পন্থা রয়েছে:

  • গ্রিড ভিত্তিক ক্লাস্টারিং
  • দূরত্ব ভিত্তিক ক্লাস্টারিং
  • ভিউপোর্ট মার্কার পরিচালনা
  • ফিউশন সারণী
  • মার্কার ক্লাস্টার
  • MarkerManager

আপনি তাদের উপরের প্রদত্ত লিঙ্কটিতে পড়তে পারেন।

Marker Clustererগ্রিডে ইচ্ছুক সমস্ত মার্কারকে ক্লাস্টার করতে গ্রিড ভিত্তিক ক্লাস্টারিং ব্যবহার করে । গ্রিড ভিত্তিক ক্লাস্টারিং মানচিত্রকে একটি নির্দিষ্ট আকারের স্কোয়ারে ভাগ করে (প্রতিটি জুমের আকার পরিবর্তন করে) এবং তারপরে প্রতিটি গ্রিড স্কোয়ারে চিহ্নিতকারীগুলিকে গ্রুপ করে কাজ করে।

ক্লাস্টারিংয়ের আগে ক্লাস্টারিংয়ের আগে

ক্লাস্টারিংয়ের পরে ক্লাস্টারিংয়ের পরে

আমি আশা করি এটি আপনি যা খুঁজছিলেন এবং এটি আপনার সমস্যার সমাধান করবে :)

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