首页 > 解决方案 > Azure Maps 仅在角落呈现图块

问题描述

我在我的一个副项目中使用 Azure Maps S0,我正在尝试让它正确呈现。该示例运行良好,但我将库作为小部件嵌入到 ThingWorx(辅助项目)中。

问题:磁贴本身仅在我的 div 的左上角呈现,但缩放控件和 Microsoft 徽标呈现在正确的位置。

如果我调整页面大小,我可以解决此问题:此操作会导致磁贴正确占据所有 div。

我正在使用的构造函数是这样的:

map = new atlas.Map(id, {
                center: [-118.270293, 34.039737],
                view: 'Auto',
                showFeedbackLink: false,
                authOptions: {
                    authType: 'subscriptionKey',
                    subscriptionKey: redacted
                }
            });

我确保它绑定到的 div 在初始化构造函数之前和之后具有正确的 clientHeight (489) 和 clientWidth (960)。我在调用构造函数后尝试调用 map.resize ,但我没有看到任何变化。

看起来像一个错误,但我不是 100% 确定。任何想法为什么这不符合我的预期?

首次加载

标签: javascriptazure-mapsthingworx

解决方案


If the page or map div is small and then grows to a larger size, its possible that the underlying HTML5 canvas/WebGL context isn't noticing the expansion (these generally do not grow automatically). If you know an expansion is going to occur, you can call map.resize() and it should recalculate the available area and modify the size of the canvas. The map does try and monitor this already but there isn't a great way to do this since there is no resize events on DOM elements in HTML/JavaScript.


推荐阅读