时间戳

首页 > 解决方案 > Azure Maps Resize + Javascript 无法正常工作

javascript - Azure Maps Resize + Javascript 无法正常工作

问题描述

我已经构建了一个 Asp.net MVC 视图，其中有来自 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);
 });

当我按下 ID 为sidebarCollapse时，侧边栏会折叠，但地图不会调整大小（它不会拉伸 100%）。但是，如果我在折叠后单击带有 id resizea的链接标签，则地图的大小会调整为正确的大小。

谁能带领我朝着正确的方向前进？

提前感谢！

标签： javascriptjqueryasp.netasp.net-mvc-4azure-maps

解决方案

正如我在评论中提到的，我怀疑 div 尚未调整大小。当 DOM 元素调整大小而不是窗口时，HTML 不提供任何事件。要知道某些东西是否调整大小，您必须对其进行监控，这对您自己来说是一件痛苦的事情。由于您使用的是 jquery，您可以使用调整大小功能：https ://api.jquery.com/resize/它适用于 div。

如果这不起作用。听起来问题出在您按下侧边栏折叠按钮时。我假设这个按钮也会折叠侧边栏，可能有一个单独的点击事件。尝试将它们组合在一起，并在调用折叠侧边栏的代码后调用 resize 函数。如果你有一个关于折叠的动画，这可能不起作用，在这种情况下，用 setTimeout 包裹 resize 函数并使用比动画稍长的时间跨度。

推荐阅读