Azure Maps Resize + Javascript не заставит его работать

Question

Я построил вид MVC Asp.net, где у меня есть карта из карт Azure. У меня также есть боковая панель, которую я могу свернуть, чтобы стать меньше.

Код для свертывания панели следующий (и включен в файл _layout):

 function collapse2() {
        $('#sidebar').toggleClass('active');
    $('#content').toggleClass('active');

}
window.onload = function () {

    $("#sidebarCollapse").on('click', collapse2);
 }

В представлении я добавил следующий javascript.

  function resize() {
                    map.map.resize();
                }
     $(document).ready(function () {



    GetMap();
    $(document).click('#resizea', resize);
     $(document).click('#sidebarCollapse', resize);
 });

Когда я нажимаю кнопку с идентификатором sidebarCollapse, боковая панель сворачивается, но размер карты не изменяется (она не растягивается на 100 %). Но если я щелкну на теге ссылки с идентификатором resizea после свертывания, карта изменит размер до правильного размера.

Кто-нибудь может привести меня в правильном направлении?

Спасибо заранее!

Answer 1

Как я уже упоминал в комментариях, я подозреваю, что размер div еще не изменился. HTML не предоставляет никаких событий, когда размер элемента DOM отличается от размера окна. Чтобы узнать, изменяется ли что-то, вы должны следить за этим, что является болью для себя. Поскольку вы используете jquery, вы можете использовать функцию изменения размера: https://api.jquery.com/resize/ Она работает с divs.

Если это не сработает. Похоже, проблема заключается в том, когда вы нажимаете кнопку сброса боковой панели. Я предполагаю, что эта кнопка также сворачивает боковую панель, возможно, с отдельным событием щелчка. Попробуйте объединить их вместе и вызвать функцию изменения размера после вызова кода для свертывания боковой панели. Если у вас есть анимация при свертывании, это может не сработать, в этом случае оберните функцию изменения размера setTimeout и используйте промежуток времени, который немного больше, чем анимация.