Який правильний спосіб знищити екземпляр карти?

Нещодавно я розробив мобільний додаток html5. Додаток являв собою одну сторінку, де події зміни навігаційного хешу замінили всю DOM. Одним з розділів програми була Google Map із використанням API v3. Перш ніж видалити map з DOM, я хочу видалити всі обробники / прослуховувачі подій і звільнити якомога більше пам'яті, оскільки користувач може не повернутися до цього розділу знову.

Який найкращий спосіб знищити екземпляр карти?

Я додаю другу відповідь на це питання, тому що я не хочу видаляти туди-сюди, які ми мали через подальші коментарі до моєї попередньої відповіді.

Але нещодавно я натрапив на деяку інформацію, яка безпосередньо стосується вашого питання, і тому я хотів поділитися з нею. Я не знаю, чи знаєте ви про це, але під час роботи Google Maps API 9 травня 2012 року Відео , Кріс Бродфут та Люк Махе з Google обговорили саме це питання від stackoverflow. Якщо ви встановите для відтворення відео 12:50, саме в цьому розділі вони обговорюватимуть ваше запитання.

По суті, вони визнають, що це помилка, але також додають, що насправді не підтримують випадки використання, які передбачають створення / знищення послідовних екземплярів карт. Вони настійно рекомендують створити єдиний екземпляр карти та використовувати її повторно в будь-якому подібному сценарії. Вони також говорять про встановлення нульової карти та явне видалення прослуховувачів подій. Ви висловили занепокоєння щодо слухачів подій, я вважав, що достатньо просто встановити карту на нуль, але, схоже, ваші побоювання є дійсними, оскільки вони конкретно згадують про слухачів подій. Вони також рекомендували повністю видалити DIV, який також містить карту.

У кожному разі, я просто хотів передати це і переконатися, що воно включено в обговорення stackoverflow і сподіваюся, що це допоможе вам та іншим.

Офіційна відповідь є не потрібно. Екземпляри карти в одностраничній програмі слід використовувати повторно, а не знищувати, а потім відтворювати.

Для деяких односторінкових додатків це може означати реорганізацію рішення таким чином, що після створення карти вона може бути прихована або відключена від DOM, але вона ніколи не руйнується / відтворюється.

Оскільки, очевидно, ви дійсно не можете знищити екземпляри карт, спосіб зменшити цю проблему, якщо

• на веб-сайті потрібно показати відразу кілька карт
• кількість карт може змінюватися при взаємодії з користувачем
• карти потрібно приховувати та повторно показувати разом з іншими компонентами (тобто вони не відображаються у фіксованому положенні в DOM)

веде пул екземплярів карт. Пул відстежує використовувані екземпляри, і коли йому пропонується новий екземпляр, він перевіряє, чи вільний будь-який з доступних екземплярів карти: якщо він є, він поверне існуючий, якщо ні, то створить новий екземпляр карти та поверніть його, додавши до пулу. Таким чином у вас буде лише максимальна кількість екземплярів, що дорівнює максимальній кількості карт, які ви коли-небудь показували одночасно на екрані. Я використовую цей код (для цього потрібен jQuery):

var mapInstancesPool = {
 pool: [],
 used: 0,
 getInstance: function(options){
    if(mapInstancesPool.used >= mapInstancesPool.pool.length){
        mapInstancesPool.used++;
        mapInstancesPool.pool.push (mapInstancesPool.createNewInstance(options));
    } else { 
        mapInstancesPool.used++;
    }
    return mapInstancesPool.pool[mapInstancesPool.used-1];
 },
 reset: function(){
    mapInstancesPool.used = 0;
 },
 createNewInstance: function(options){
    var div = $("<div></div>").addClass("myDivClassHereForStyling");
    var map =   new google.maps.Map(div[0], options);
    return {
        map: map,
        div: div
    }
 }
}

Ви передаєте йому початкові параметри карти (згідно з другим аргументом конструктора google.maps.Map), і він повертає як екземпляр карти (на якому ви можете викликати функції, що відносяться до google.maps.Map), так і контейнер, який Ви можете створити стиль за допомогою класу "myDivClassHereForStyling", і можете динамічно додати до DOM. Якщо вам потрібно скинути систему, ви можете скористатися mapInsistancePool.reset (). Він скине лічильник на 0, зберігаючи всі наявні екземпляри в пулі для повторного використання. У моїй програмі мені потрібно було видалити всі карти одночасно і створити новий набір карт, тому немає функції переробки конкретного екземпляра карти: ваш пробіг може змінюватися. Щоб видалити карти з екрану, я використовую jQuery's detach, який не руйнує контейнер карти.

Використовуючи цю систему, і використовуючи

google.maps.event.clearInstanceListeners(window);
google.maps.event.clearInstanceListeners(document);

і працює

google.maps.event.clearInstanceListeners(divReference[0]);
divReference.detach()

.

Я б запропонував видалити вміст div div і використовувати deleteзмінну, що містить посилання на карту, і, можливо, явно deleteвписати будь-які прослуховувачі подій.

Однак існує визнана помилка , і це може не спрацювати.

Оскільки Google не надає gunload () для api v3, краще використовувати iframe у html та призначити map.html як джерело для цього iframe. після використання зробіть src нульовим. Це точно звільнить пам’ять, споживану картою.

Коли ви видалите div, що видаляє панель дисплея, і карта зникне. Щоб видалити екземпляр карти, просто переконайтеся, що для вашого посилання на карту встановлено значення, nullа для будь-яких посилань на інші частини карти встановлено значення null. На той момент збір сміття JavaScript подбає про очищення, як описано в: Як працює збір сміття в JavaScript? .

Я думаю, ви говорите про addEventListener. Коли ви видаляєте елементи DOM, деякі браузери витікають із цих подій і не видаляють їх. Ось чому jQuery виконує кілька дій під час видалення елемента:

• Він видаляє події, коли може використовувати removeEventListener. Це означає, що він зберігає масив із прослуховувачами подій, які він додав до цього елемента.
• Він видаляє атрибути про події ( onclick, onblurтощо) за допомогою deleteелемента DOM, коли addEventListenerвін недоступний (все-таки він має масив, де зберігає додані події).
• Він встановлює елемент таким чином, nullщоб уникнути витоків пам'яті IE 6/7/8.
• Потім він видаляє елемент.