গুগল ম্যাপস পুরোপুরি লোড হয়েছে কিনা তা আমি কীভাবে পরীক্ষা করতে পারি?


293

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

টাইল ডাউনলোডগুলি এবং সমস্ত সহ Google মানচিত্র পুরোপুরি লোড হয়ে যাওয়ার পরে কী স্বয়ংক্রিয় সনাক্ত করার কোনও উপায় আছে?

একটি tilesloaded()পদ্ধতি বিদ্যমান যা এই কাজটি ঠিক সম্পাদন করার কথা বলেছে তবে এটি কার্যকর হয় না


2
"টাইলসলোড" ইভেন্টটি আমার পক্ষে কাজ করে বলে মনে হচ্ছে। পৃষ্ঠাটি লোড হয়ে যাওয়ার পরে এবং যখন আমি মানচিত্রটি প্রায় সরানো হয় তখন এটি আগুনে ছড়িয়ে পড়ে। আপনার মানচিত্রে, এটি কি কেবলমাত্র বেমানান, বা এটি কখনও কাজ করে না?
ক্রিস বি

না কিছু না. "টাইলসলোডড" যেমনটি বলা হয়েছে যে প্রতিবার নতুন টাইলগুলি লোড করা হবে তা বোঝানো হবে যার অর্থ এটি কেবল প্রথম লোডে জ্বলবে না তবে প্রতিবার আপনি যেখানে টাইলস লোড হয়নি এমন স্থানে মানচিত্র টানবেন।
আইভাস

নির্ভর করে যদি আপনি অ্যাডলিস্টনার () বা অ্যাডলিস্টনারঅনস () ব্যবহার করেন। আপনি অ্যাডলিস্টনার () সম্পর্কে ঠিক বলেছেন - আমি কেন ব্যবহার করি তা সম্পর্কেgoogle.maps.event.addListenerOnce(map, 'tilesloaded', function() {
vchrizz

উত্তর:


608

এটি GMaps v3 দিয়ে কিছু সময়ের জন্য আমাকে বিরক্ত করছিল।

আমি এটি এর মতো করার একটি উপায় পেয়েছি:

google.maps.event.addListenerOnce(map, 'idle', function(){
    // do something only the first time the map is loaded
});

"অলস" ইভেন্টটি ট্রিগার করা হয় যখন মানচিত্রটি নিষ্ক্রিয় অবস্থায় যায় - সবকিছু লোড হয় (বা লোড করতে ব্যর্থ হয়)। আমি এটি আরও নির্ভরযোগ্য বলে মনে করেছি তাহলে টাইলসলোডড / সীমানা_চিন্জড এবং addListenerOnceপদ্ধতিটি বন্ধ করে কোডটি ব্যবহার করে প্রথমবার "নিষ্ক্রিয়" বরখাস্ত করা হয় এবং তারপরে ইভেন্টটি আলাদা করা হয়।

আরও দেখুন ঘটনা অধ্যায় Google মানচিত্র রেফারেন্স হবে।


15
মানচিত্রটি নিষ্ক্রিয় অবস্থায় যাওয়ার সময় এটি চালিত হয় (আর কিছুই লোড হবে না)। কখনও কখনও এমন কিছু টাইলস থাকতে পারে যা খারাপ সংযোগের কারণে লোড হয় নি তাই এমনকি যদি এখানে হারিয়ে যাওয়া টুকরোগুলি থাকে তবে এটি অলস ইভেন্টটিকে শেষ পর্যন্ত ট্রিগার করবে। আপনার যদি মানচিত্রটি সম্পূর্ণরূপে নিশ্চিত হওয়া দরকার, কোনও অনুপস্থিত টাইলস ইত্যাদি নেই, আপনার অন্য কোনও উপায়ে (উদাহরণস্বরূপ "টাইলসলোড করা" ইভেন্ট) নেওয়া উচিত।
ddinchev

15
এটি আমার পক্ষে কাজ করছে না .. আমার মানচিত্রে কিছু দেখানোর আগে ট্রিগার করে
zsitro

16
-1: টাইলগুলি লোড / প্রদর্শিত হওয়ার আগে তাড়াতাড়ি ট্রিগারগুলি।
zbr

11
-1: ক্রোম এবং ফায়ারফক্সে আমার জন্য, স্ক্রিপ্টটি লোড হওয়ার সাথে সাথে কোনও টাইল শোয়ের আগে এটি ধারাবাহিকভাবে গুলি চালায়। এটি দ্রুত সংযোগে প্রদর্শিত হতে পারে না তবে আমি খুব ধীর গতির সাথে ধন্য হয়েছি। 'টাইলসলোড' মনে হচ্ছে যদিও কাজ করে।
Xananax

1
সমাধানের জন্য ধন্যবাদ - আমি মনে করি এটি ঠিক আমার প্রয়োজন ছিল। যা আমি কেবল আমার মাথাটি গুটিয়ে রাখতে পারি না, কেন পৃথিবীতে গুগল সাধারণ রেড হুক রাখেনি? : -ও
হেসে

55

আমি HTML5 মোবাইল অ্যাপস তৈরি করছি এবং আমার যে লক্ষ্য idle, bounds_changedএবং tilesloadedঘটনা আগুন যখন মানচিত্র বস্তুর সৃষ্টি অনুষ্ঠিত (এমনকি যদি এটা দৃশ্যমান নয়) করা হয়।

আমার মানচিত্রটি রান কোড করার জন্য যখন এটি প্রথমবার প্রদর্শিত হবে তখন আমি নিম্নলিখিতটি করলাম:

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    //this part runs when the mapobject is created and rendered
    google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
        //this part runs when the mapobject shown for the first time
    });
});

4
প্রথম টাইলসলোড করা ফাংশনটি আমার পক্ষে ভাল কাজ করে, তবে দ্বিতীয় টাইলসলোডকৃত ফাংশনটি কখনই আমার পক্ষে চালায় না।
গোস

আমি পেয়ে করছি Uncaught ReferenceError: map is not defined। আমি দেরি করে এবং আমার অন্যান্য স্ক্রিপ্টগুলির শেষে স্ক্রিপ্টটি চালানোর চেষ্টা করেছি তবে কিছুই কাজ করছে বলে মনে হচ্ছে না।
স্যাম উইলিস

1
আপনি যদি ইভেন্ট হ্যান্ডলারগুলির মধ্যে ইভেন্ট হ্যান্ডলারগুলি সংজ্ঞায়িত করে থাকেন তবে আপনার একটি খারাপ সময় চলে যাবে। আমি দৃ strongly়ভাবে পরামর্শ দিচ্ছি যে আপনি এটি করবেন না, এখানে কিছুটা কম হ্যাকি বিকল্প রয়েছে যা একটি অনুরূপ জিনিস অর্জন করে: gist.github.com/cmawhorter/a1b0b6a6b73678b97920f748ebca244b
কোরি মাওয়াহারপোর্টার

15

আপনি যদি মানচিত্রের API v3 ব্যবহার করছেন তবে এটি পরিবর্তিত হয়েছে।

সংস্করণ 3-এ, আপনি মূলত bounds_changedইভেন্টটির জন্য একটি শ্রোতা সেট আপ করতে চান যা মানচিত্রের লোডের পরে ট্রিগার করবে। এটি একবার ট্রিগার হয়ে গেলে, শ্রোতাদের সরান কারণ আপনি প্রতিবার ভিউপোর্টের সীমানা পরিবর্তনের সময় অবহিত হতে চান না।

এটি ভবিষ্যতে পরিবর্তিত হতে পারে কারণ ভি 3 এপিআইটি বিকশিত হচ্ছে :-)


2
tilesloadedইভেন্টটি দেখার মতো নির্ভরযোগ্যতার সাথে এটি আমার জন্য কাজ করছে না ।
টিএমসি

12

2018 সালে:

var map = new google.maps.Map(...)
map.addListener('tilesloaded', function () { ... })

https://developers.google.com/maps/documentation/javascript/events


টাইলসলোড এমন একমাত্র সমাধান যা কেএমএল স্তরগুলি সমস্ত রেন্ডার না হওয়া পর্যন্ত সঠিকভাবে অপেক্ষা করে
স্মার্কিংম্যান

9

আপনি যদি ওয়েব উপাদান ব্যবহার করে থাকেন তবে তাদের উদাহরণ হিসাবে এটি রয়েছে:

map.addEventListener('google-map-ready', function(e) {
   alert('Map loaded!');
});

3
ভয়ানক মন্তব্য, এতগুলি স্তরের এটির ভুলটি কোথায় শুরু হবে তা জানেনা।
রাত 11

1
আপনি কেন বলেন "ভয়ঙ্কর মন্তব্য, এটি এত স্তরে ভুল যে আমি জানি না কোথায় শুরু করব"?
ফিলিপ সেন

3
তবে কেন কেবল গুগল ম্যাপের চেয়ে আলাদা ফ্রেমওয়ার্ক ব্যবহার করে একটি সমাধান সরবরাহ করবেন?
রাত

কারণ এটি আরও ভাল?
ফিলিপ সেন

হাহাহা @ রাত্রি
জুয়ান

5

GMap2::tilesloaded() আপনি খুঁজছেন ইভেন্ট হবে।

রেফারেন্সের জন্য GMap2 . टाয়েললোড দেখুন ।


টাইলসলোডড () ইভেন্টটি সম্পর্কে আমি অনেক কিছু পড়েছি এবং মনে হয় এটি যখন আগুন জ্বলে তখন এটি অত্যন্ত বেমানান। অন্য কোন বিকল্প?

3

যেখানে ভেরিয়েবল mapGMap2 টাইপের একটি অবজেক্ট:

    GEvent.addListener(map, "tilesloaded", function() {
      console.log("Map is fully loaded");
    });

0

আমার ক্ষেত্রে, দূরবর্তী ইউআরএল থেকে লোড হওয়া টাইল চিত্রটি tilesloadedচিত্রটি রেন্ডার করার আগেই ট্রিগার করা হয়েছিল।

আমি নিম্নলিখিত নোংরা উপায় সঙ্গে সমাধান।

var tileCount = 0;
var options = {
    getTileUrl: function(coord, zoom) {
        tileCount++;
        return "http://posnic.com/tiles/?param"+coord;
    },
    tileSize: new google.maps.Size(256, 256),
    opacity: 0.5,
    isPng: true
};
var MT = new google.maps.ImageMapType(options);
map.overlayMapTypes.setAt(0, MT);
google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    var checkExist = setInterval(function() {
        if ($('#map_canvas > div > div > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(2) > div > div').length === tileCount) {
            callyourmethod();
            clearInterval(checkExist);
        }
    }, 100); // check every 100ms
});

-4

মানচিত্র এবং এর সমস্ত টাইলস লোড হয়েছে কিনা তা দেখার জন্য আপনি GMap2.isLoaded()প্রতি nমিলিসেকেন্ডে পদ্ধতিটি পরীক্ষা করতে পারেন ( window.setTimeout()বা window.setInterval()আপনার বন্ধুরা)।

এটি আপনাকে বোঝা সমাপ্তির সঠিক ইভেন্টটি দেয় না তবে এটি আপনার জাভাস্ক্রিপ্টকে ট্রিগার করার জন্য যথেষ্ট ভাল হওয়া উচিত।

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