Azure Maps Resize + Javascript 无法正常工作答案

【问题标题】：Azure Maps Resize + Javascript won't get it to workAzure Maps Resize + Javascript 无法正常工作
【发布时间】：2019-07-19 02:00:07
【问题描述】：

我已经构建了一个 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 的链接标签，则地图的大小会调整为正确的大小。

谁能引导我朝着正确的方向前进？

提前感谢！

【问题讨论】：

我怀疑当你在地图上调用resize函数时，地图所在的div还没有调整大小。这可以解释你的问题。另外，尝试使用 map.resize() 而不是 map.map.resize()。不是 100% 确定您为什么拥有 map.map，但地图控件中有一个隐藏功能与渲染引擎相关联，它还具有调整大小功能，但我不相信它会满足您的需求。跨度>
我认为您走在正确的道路上。有没有办法知道 div 已经调整大小或等到它调整大小？我使用 map.map.resize() 是因为：social.msdn.microsoft.com/Forums/en-US/… 我测试了 map，map.resize 和 map.resize 似乎都以相同的方式工作。

标签： javascript jquery asp.net asp.net-mvc-4 azure-maps

【解决方案1】：

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

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

【讨论】：