1

我正在尝试将地图集成到 Angular Material 选项卡中。确切地说，所有选项卡中的地图。我正在使用Datamaps来渲染地图。

我用我做过的演示做了一支笔，http://codepen.io/sgsvenkatesh/pen/yJbYOj

当我用setTimeout. （我在上面的第 128 行注释掉了）

当setTimeout应用如下所示时，代码工作得非常好。

setTimeout(function () {
    new Datamap({
        element: elem[0].querySelector(".map"),
        scope: 'usa',
        projection: 'equirectangular',
        height: 500,
        fills: {
            defaultFill: '#F5F5F5'
        },
        data: scope.dataset,
        geographyConfig: {
            highlightBorderColor: '#bada55',
            popupTemplate: function (geography) {
                return '<div class="hoverinfo">' + geography.properties.name + '</div>';
            },
            highlightBorderWidth: 2
        }
    }).labels({'customLabelText': scope.USData});
}, 1000);

在我看来，问题是因为 Datamaps 甚至在 Angular Material 渲染完成之前就被渲染了。（可能这就是为什么 svg 没有任何宽度/高度）

Angular Material 渲染完成后是否提供回调？如果不是，我们如何实现任何 DOM 操作，这应该发生在材质渲染之后。

如果需要更多信息，请发表评论。

4

0 回答 0