Question

目前使用聚合物的google-map组件并遇到一些问题。

https://elements.polymer-project.org/elements/google-map

我想要做的是动态创建google-map-markers以在地图上显示。这可以是URL中的坐标，从我们的数据库中获取的数据等等。

这是我的代码目前的样子：

<google-map id="map" fit-to-markers api-key="API-KEY">
    <template is="dom-repeat" items="{{data}}">
        <google-map-marker latitude="[[item.Latitude]]" longitude="[[item.Longitude]]">Marker</google-map-marker>
    </template>
</google-map>

然而，这是我的问题。只有在加载地图之前标记完成渲染到DOM时，此ONLY才有效。如果首先加载地图，则标记将不会显示。显然，我正在遇到竞争条件。

有没有办法刷新google-map元素，以便在完成渲染到DOM后显示新标记？我觉得我已经尝试过元素页面上的每个功能都无济于事。

非常感谢任何帮助。

Answer 1

事实证明，这是使用Polymer的谷歌地图实现使用原生阴影DOM的错误。

请在此处查看GitHub问题：https://github.com/GoogleWebComponents/google-map/issues/299

此问题的解决方法是将地图标记绑定到地图对象（请参阅下文）：

<google-map id="map" map="{{map}}" fit-to-markers api-key="API-KEY">
<template is="dom-repeat" items="{{data}}">
    <google-map-marker map="[[map]]" latitude="[[item.Latitude]]" longitude="[[item.Longitude]]">Marker</google-map-marker>
</template>

但是，我注意到这并没有完全解决问题。标记标记（innerHTML）内的任何数据绑定仍然不会呈现。这是您使用信息填充信息窗口的方式。据我所知，除非它是静态文本，否则仍然无效。

街景也无法使用原生影子DOM。

我确实发现我们的应用程序使用的是原生阴影DOM。我把它转换为一时兴起使用阴暗的DOM，我的所有问题都神奇地解决了。

（聚合物）将google-map-markers动态添加到DOM

1 个答案: