ব্রাউজার পুনরায় আকারে (প্রতিক্রিয়াশীল) গুগল মানচিত্র (ভি 3) কেন্দ্র করুন

Question

আমার এক পৃষ্ঠায় 100% পৃষ্ঠার প্রস্থে একটি চিহ্নিতকারী মাঝখানে একটি Google মানচিত্র (ভি 3) রয়েছে। আমি যখন আমার ব্রাউজার উইন্ডোটির প্রস্থকে আকার পরিবর্তন করি তখন আমি মানচিত্রটি কেন্দ্রীভূত (প্রতিক্রিয়াশীল) থাকতে চাই। এখন মানচিত্রটি পৃষ্ঠার বাম দিকে থাকে এবং আরও ছোট হয়।

আপডেট আপডেট ডানকান ধন্যবাদ বর্ণিত ঠিক যেমন কাজ করতে পেলেন। এটিই চূড়ান্ত কোড:

var center;
function calculateCenter() {
  center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
  calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
  map.setCenter(center);
});

Comments

ভাল করেছ! হ্যাঁ, আপনাকে অবিরত বর্তমান কেন্দ্রের মানটি বিশ্বব্যাপী আওতায় আনতে হবে যাতে এটি ডম শ্রোতার দ্বারা বাছাই করা যায়

— ইফউজেমস

আপনি যদি শীর্ষে যাচ্ছেন তবে centerএটি বিশ্বব্যাপী হওয়ার দরকার নেই। সরবরাহ করা center(এবং calculateCenter) একই স্কোপে থাকে map, তারপরে সবকিছুই কাজ করা উচিত। অবশ্যই, যদি mapএটি বিশ্বব্যাপী হয় তবে আপনাকে এটিও ঠিক করতে হবে :)

— রোমের -1888

সম্ভবত এটি বেশিরভাগের কাছেই সুস্পষ্ট, তবে মানচিত্রটি লোড হওয়ার পরে এই কোডটি আসে, সুতরাং এটি উইন্ডোজ.অনলোডে অন্তত হওয়া উচিত

— ভিক্টোরিয়া রুইজ

ধন্যবাদ, এটি

— হ'ল

Answer 1

উইন্ডোটি আকার পরিবর্তন করার জন্য আপনার ইভেন্ট শ্রোতা থাকা দরকার। এটি আমার পক্ষে কাজ করেছে (এটি আপনার আরম্ভের ফাংশনে রাখুন):

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

Comments

এটি নিখুঁতভাবে কাজ করে, ধন্যবাদ! তবে যদি কেউ মানচিত্র স্থানান্তরিত করে থাকে তবে আমি কীভাবে মানচিত্রের নতুন কেন্দ্রটি পেতে পারি? আমি getCenter () ফাংশনটি পেয়েছি তবে সঠিকভাবে এটি কাজ করতে পারি না। map.setCenter (map.getCenter ()); কাজ করে না

— গ্রেগরি বলকেনস্টিজন

আপনি অন্য ইভেন্ট শ্রোতা চান, আমি মনে করি মানচিত্র অবজেক্টে "কেন্দ্র_দলিত" এর জন্য, যা নতুন স্থানাঙ্কের সাথে একটি গ্লোবাল ভেরিয়েবল আপডেট করে, যা আপনি আপনার সেট সেন্টারে ব্যবহার করতে পারেন।

— ডানকান

আমি এটিও চেষ্টা করেছি: var center; google.maps.event.addListener(map, 'center_changed', function() { center = map.getCenter(); }); google.maps.event.addDomListener(window, 'resize', function() { map.setCenter(center); }); কাজ করে না। কোন সাহায্য প্রশংসা করা হবে।

— গ্রেগরি বলকেনস্টিজন

পরিবর্তে "বাউন্ডস_ চেঞ্জড" কীভাবে?

— ডানকান

এটি সহজতম উপায়: hsmoore.com/blog/…

— এও_

Answer 2

ব্রাউজারের পুনরায় আকারের ইভেন্টটি সনাক্ত করুন, কেন্দ্রের পয়েন্টটি সংরক্ষণের সময় Google মানচিত্রকে পুনরায় আকার দিন:

var map = ...; // your map initialisation code

google.maps.event.addDomListener(window, "resize", function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center); 
});

অন্যান্য উপায়ের মাধ্যমে গুগল ম্যাপকে পুনরায় আকার দেওয়ার সময় আপনি যেমন ইভেন্ট হ্যান্ডলারগুলিতে একই কোডটি ব্যবহার করতে পারেন (উদাহরণস্বরূপ jQuery-UI 'রিজাইজেবল' নিয়ন্ত্রণ সহ)।

সূত্র: http://hsmoore.com/blog/keep-google-map-v3-centered-when-browser-is-resized/ লিঙ্কটির জন্য @ এসএমফিট্রে ক্রেডিট ।

দ্রষ্টব্য: এই কোডটি স্বীকৃত উত্তরে @ স্মার্টের মন্তব্যে লিঙ্কিত ছিল। আমি মনে করি এটি নিজের উত্তর হিসাবে যুক্ত করা উপযুক্ত কারণ এটি গ্রহণযোগ্য উত্তরের চেয়ে সত্যই উচ্চতর। এটি কেন্দ্রের পয়েন্টটি ট্র্যাক করতে একটি বৈশ্বিক পরিবর্তনশীল এবং সেই ভেরিয়েবলটি আপডেট করার জন্য একটি ইভেন্ট হ্যান্ডলারের প্রয়োজনীয়তা দূর করে।

Comments

@ উইলিয়ামের সাথে সম্মত হন, মানচিত্রটি পুনরায় আকার দেওয়ার সময় এই পদ্ধতিটি আরও সঠিক কেন্দ্র-পজিশনে আসে।

— দশম ফ্লাওয়ার

গৃহীত উত্তর সঠিকভাবে কাজ করছে না, এই কৌশলটি করেছে

— টম

এটি সেরা এবং কার্যক্ষম সমাধান solution প্রতিটি আকারের উইন্ডোজ ইভেন্টে কাজ করে। অন্যান্য সমাধানগুলি সঠিকভাবে কাজ করে নি।

— zdarsky.peter

এটি সত্যই সম্প্রদায় উইকি হিসাবে পোস্ট করা উচিত ছিল।

— গুস্তাভোহেঙ্কে

এটি কাজ করে তবে আমি এটি আরও বুঝতে চাই। অবিকল কি করে google.maps.event.trigger(map, "resize");?

— মেডুজ '

Answer 3

W3schools.com- তে কয়েকটি ভাল উদাহরণ। আমি নিম্নলিখিতটি ব্যবহার করেছি এবং এটি দুর্দান্ত কাজ করে।

google.maps.event.addDomListener(window, 'resize', function() {
  map.panTo(myLatlng);
});

http://www.w3schools.com/googleapi/google_maps_events.asp

Answer 4

এইচটিএমএল: আপনার পছন্দের একটি আইডি দিয়ে একটি ডিভ তৈরি করুন

<div id="map"></div>

জেএস: একটি মানচিত্র তৈরি করুন এবং এটি সবেমাত্র তৈরি ডিভের সাথে সংযুক্ত করুন

var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.890542, 151.274856)
});

উইন্ডোটির আকার পরিবর্তন করার সময় কেন্দ্র Center

var center = map.getCenter();

google.maps.event.addDomListener(window, 'resize', function() {
    map.setCenter(center);
});

Answer 5

উপরের সমাধানটি এস -6-তে আপডেট হয়েছে।

let center;
const addMapListener = google.maps.event.addDomListener;

addMapListener(map, 'idle', () => center = map.getCenter());
addMapListener(window, 'resize', () => map.setCenter(center));

Comments

আপনি addDomListenerউভয়টির জন্য ব্যবহার করছেন window, যা একটি ডিওএম উপাদান, এবং mapযা নেই। মানচিত্রের অবজেক্টটি google.maps.event.addListenerবা তার নিজস্ব map.addListenerইভেন্ট হ্যান্ডলারটি ব্যবহার করা উচিত ।

— ডানকান