Azure Maps仅在一个角落渲染图块

Question

我正在我的一个辅助项目中使用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％。有什么想法为什么我的表现不如预期吗？

Answer 1

如果页面或地图div很小，然后增大到更大的大小，则底层HTML5 canvas / WebGL上下文可能没有注意到扩展（这些通常不会自动增长）。如果您知道将要发生扩展，则可以调用map.resize()，它应该重新计算可用区域并修改画布的大小。该地图确实已经尝试监视此事件，但是由于在HTML / JavaScript中DOM元素上没有调整大小事件，因此没有一种很好的方法。