Держите карту Google Maps v3 скрытой, показывайте ее при необходимости

Есть ли способ предотвратить отображение карты Google Maps (JS, v3) с самого начала? Я выполняю некоторую предварительную обработку и хотел бы показывать свой счетчик «Загрузка», пока все не будет готово (более красноречиво говоря, скрыть карту — например, контейнер div — до тех пор, пока вся предварительная обработка не будет завершена — в этот момент , покажи карту).

Подключение события idle карты не очень помогает, так как карта уже отображается, когда это событие происходит.

Я знаю, что контейнер div получает встроенный стиль GMaps после загрузки, моя первая идея состояла в том, чтобы очистить атрибут style (во время прослушивания события idle), но было бы интересно посмотреть, есть ли способ создать карту и не отображать его, пока не будет выполнена вся предварительная обработка.

Может быть, используя аргумент конструктора new google.maps.Map или MapOption?

Есть мысли по этому поводу?

Заранее спасибо!


google-maps google-maps-api-3
person Dr1Ku    schedule 29.07.2010    source источник
comment
Я использовал трюк $(#map_canvas).attr(style, position:relative; visible: hidden), работает.   -  person Dr1Ku    schedule 29.07.2010
comment
Как говорит Др1Ку. Отобразите карту в невидимый div, а затем покажите div при первом событии простоя. Обязательно используйте addListenerOnce.   -  person CrazyEnigma    schedule 29.07.2010

Ответы (8)


arrow_upward
69
arrow_downward

Также не забудьте позвонить:

google.maps.event.trigger(map, 'resize');

если вы изменили размер файла <div>. display:none <div> не имеет размера.

person skarE    schedule 05.08.2010
comment
Для меня это было лишь частичным решением. Мне также пришлось вызвать map.fitBounds(bounds);, где bounds был правильным объектом LatLngBounds. - person matt; 14.02.2012
comment
В дополнение к тому, что сказал Мэтт, вы можете использовать panTo(location) для повторного центрирования карты. - person dtanders; 14.09.2015
comment
@dtanders, какое отличное дополнение! - person sitilge; 25.07.2017

arrow_upward
5
arrow_downward

Или вы можете просто скрыть его, например, с помощью CSS-видимости или CSS-непрозрачности.

$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();

google.maps.event.addListener(map,"idle", function(){ 
     $('#Loader').hide();
     $("#GoogleMap").css({ opacity: 1, zoom: 1 });
});
person Tom    schedule 11.12.2012
comment
непрозрачность: 0 сделал свое дело, я пытался отобразить: нет, и не было хороших результатов - person Rodrigo Zurek; 05.07.2013

arrow_upward
4
arrow_downward

Это работает для меня. Я использую библиотеку JQuery.

$(document).ready(function(){
    $('#Checkbox').click(function(){
        $('#googleMapDiv').toggle();
        initialize(); // initialize the map
    });
});
person Gabriel Ramirez    schedule 12.10.2011
comment
Эй, Габриэль. Спасибо за это удивительно простое и эффективное решение. Работает как шарм! - person Enes; 29.03.2013
comment
Обратите внимание, что это, вероятно, будет перезагружать карту каждый раз, а с Maps API v3 существует дневной лимит на то, сколько раз вы можете загружать элемент карты. - person Simon; 30.12.2013

arrow_upward
2
arrow_downward

это отлично работает для меня, я использую вкладки jquery

setTimeout(function() {
        google.maps.event.trigger(map, "resize");
        map.setCenter(new google.maps.LatLng(default_lat, default_lng));
        map.setZoom(default_map_zoom);
    }, 2000);

по этой ссылке https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448

person Karim Samir    schedule 09.03.2014

arrow_upward
2
arrow_downward

Это будет работать

    google.maps.event.addListener(map, "idle", function ()
    {
        google.maps.event.trigger(map, 'resize');
    });
person Geetesh    schedule 28.06.2016

arrow_upward
2
arrow_downward

другой способ показать скрытую карту, когда карта впервые отображает <div>, — установить стиль: видимость.

При первом скрытии используйте visibility = hidden; показать использовать visibility = visible

причина в следующем: visibility:hidden означает, что содержимое элемента будет невидимым, но сам элемент останется в исходном положении и размере.

person long    schedule 01.02.2019

arrow_upward
1
arrow_downward

лучший способ:

gmap.redraw = function() {
    gmOnLoad = true;
    if(gmOnLoad) {
        google.maps.event.trigger(gmap, "resize");
        gmap.setCenter(gmlatlng);
        gmOnLoad = false;
    }
}

и в событии show click:

$("#goo").click(function() {
  if ($("#map_canvas").css("display") == "none") {
    $("#YMapsID").toggle();
    $("#map_canvas").toggle();
    if (gmap != undefined) {
        gmap.redraw();
    }
  }
});
person Крайст    schedule 22.02.2011
comment
Я подумал, что это временное решение лучше, чем ничего. - person Крайст; 03.03.2011

arrow_upward
1
arrow_downward

в зависимости от того, что вы делаете, другая возможность может состоять в том, чтобы иметь несколько логических значений, для которых вы устанавливаете значение true, когда каждый процесс выполняется.

Например:

если у вас запущена служба геокодирования, которую вы хотите дождаться, у вас может быть переменная с именем GeoState

и в результирующей части геокодера установите для GeoState значение true, а затем проверьте, все ли сервисы вернули true, когда они это сделали, сделайте карту видимой.

person idea    schedule 19.04.2011