Google Maps Api V3: наложение ImageMap с индикаторами загрузки - PullRequest
Новая
       23

Google Maps Api V3: наложение ImageMap с индикаторами загрузки

2 голосов
/ 22 мая 2011

У меня есть оверлей ImageMap, подобный следующему: 

var options = {
    getTileUrl: function(coord, zoom) {
        return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var overlay = new google.maps.ImageMapType(options);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, overlay);

Поскольку загрузка изображений может занять некоторое время, я хочу показать индикаторы загрузки для карты (это обычные анимированные GIF-файлы для вызовов AJAX).Я не уверен, что удобство использования будет лучше, если для всей карты будет только один индикатор или один индикатор для каждой наложенной плитки.Итак, решения и мысли для обоих приветствуются.

1 Ответ

5 голосов
/ 22 мая 2011

Используйте CSS, чтобы скрыть div, который содержит вашу карту. Используйте addEventListenerOnce() на вашей карте, чтобы прослушать событие idle или, возможно, событие bounds_changed. (Возможно, вам придется поэкспериментировать, чтобы увидеть, какое событие дает вам лучший результат.) Когда событие запускается, сделайте div, который держит вашу карту видимым.

Существует как минимум два разумных способа показать индикатор прогресса во время ожидания события. Вы можете иметь его в отдельном div, который (в дополнение к раскрытию div карты) вы прячете, когда происходит событие. Или вы можете обернуть карту div внутри другого div и установить фоновое изображение для этого div в качестве анимированного изображения индикатора прогресса.

В конце ваш код может напоминать этот блок, который мне пришлось написать не так давно: 

document.getElementById("map_canvas").style.visibility = "hidden";
var mapType = new google.maps.ImageMapType({
                tileSize: new google.maps.Size(256,256),
                getTileUrl: function(coord,zoom) {
                    return 'img/tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png';
                }
            });
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, mapType);
google.maps.addListenerOnce(map, 'idle', function() { document.getElementById("map_canvas").style.visibility = "visible";});
...