google-dom-repeat 中的地图标记存在绑定问题

Question

我正在尝试用地图制作一个聚合物页面，在地图上我正在尝试放置多个标记（通过 dom-重复很容易），当我点击一个我想要的标记时显示一个信息窗口，里面有一个组件，它从外部接受数据并以某种方式显示它。我目前在尝试通过绑定传递给信息窗口内组件的信息来制作 google-地图标记的 dom-重复时遇到问题。

基本上，当执行 dom-repeat 并创建标记时，数据会在信息窗口组件中正确设置，但在此时和显示信息窗口之间的某处，数据会丢失，所有设置都是现在未定义。

我尝试了不同的方法，得出的结论是：

如果与

一起使用，则绑定有效

<slot></slot>

标签，直接显示内容

信息窗口组件代码：

<dom-module id="report-infowindow">
    <template>

        <paper-button><slot></slot></paper-button>

    </template>
    <script>
        /**
         * @customElement
         * @polymer
         */
        class ReportInfoWindow extends Polymer.Element {
            static get is() {
                return 'report-infowindow';
            }

            static get properties() {
                return {
                    mproperty:{
                        type: String,
                        notify: true
                    }
                };
            }
        }

        window.customElements.define(ReportInfoWindow.is, ReportInfoWindow);
    </script>
</dom-module>

调用组件的页面

<dom-module id="map-page">
    <template>
        <style>

            :host {
                display: block;
            }

            google-map {
                width: 100%;
                height: 100%;
            }
        </style>

        <google-map fit-to-markers single-info-window="true" map="{{map}}" api-key="{{key}}">
            <template is="dom-repeat" items="{{markers}}">
                <google-map-marker slot="markers" map="{{map}}" latitude="{{item.lat}}" longitude="{{item.lng}}" draggable="false" icon="{{icon}}">
                    <report-infowindow>{{item.lat}}</report-infowindow>
                </google-map-marker>
            </template>
        </google-map>

    </template>

    <script>
        /**
         * @customElement
         * @polymer
         */
        class MapPage extends Polymer.Element {
            static get is() {
                return 'map-page';
            }

            static get properties() {
                return {
                    key: {
                        type: String,
                        value: "KEY"
                    },

                    icon: {
                        type: String,
                        value: "./src/assets/images/marker_small.png"
                    },

                    markers: {}
                };
            }
        }

        window.customElements.define(MapPage.is, MapPage);
    </script>
</dom-module>

如果与组件公开的属性一起使用，则绑定不起作用：

信息窗口组件：

<dom-module id="report-infowindow">
    <template>

        <paper-button>{{mproperty}}</paper-button>

    </template>
    <script>
        /**
         * @customElement
         * @polymer
         */
        class ReportInfoWindow extends Polymer.Element {
            static get is() {
                return 'report-infowindow';
            }

            static get properties() {
                return {
                    mproperty:{
                        type: String,
                        notify: true
                    }
                };
            }
        }

        window.customElements.define(ReportInfoWindow.is, ReportInfoWindow);
    </script>
</dom-module>

页面调用组件：

<dom-module id="map-page">
    <template>
        <style>

            :host {
                display: block;
            }

            google-map {
                width: 100%;
                height: 100%;
            }
        </style>

        <google-map fit-to-markers single-info-window="true" map="{{map}}" api-key="{{key}}">
            <template is="dom-repeat" items="{{markers}}">
                <google-map-marker slot="markers" map="{{map}}" latitude="{{item.lat}}" longitude="{{item.lng}}" draggable="false" icon="{{icon}}">
                    <report-infowindow mproperty="{{item.lat}}"></report-infowindow>
                </google-map-marker>
            </template>
        </google-map>

    </template>

    <script>
        /**
         * @customElement
         * @polymer
         */
        class MapPage extends Polymer.Element {
            static get is() {
                return 'map-page';
            }

            static get properties() {
                return {
                    key: {
                        type: String,
                        value: "KEY"
                    },

                    icon: {
                        type: String,
                        value: "./src/assets/images/marker_small.png"
                    },

                    markers: {}
                };
            }
        }

        window.customElements.define(MapPage.is, MapPage);
    </script>
</dom-module>

但与此同时，如果设置

等静态值，属性本身也可以工作

<report-infowindow mproperty="sasa"></report-infowindow>

我不明白这是错误还是我做错了什么。

Answer 1

您什么都没做 "wrong" - 它只是不起作用。自从 google-map 元素开始以来，信息窗口就出现了这个问题和许多相关问题。例如，请参阅 issue 286、问题 288 以及随后在拉取请求中进行的长时间讨论。

问题在于 google-map-marker 将信息窗口标记复制 到信息窗口中，该信息窗口本身位于文档的上下文中，而不是您的元素中。任何绑定都将丢失，并且使用 CSS 类进行样式设置的任何能力都会在副本中丢失。除非他们停止使用本机信息窗口，否则这不会得到解决。

我开发了一个自定义元素 plastic-map-info，它是 google-map 的一个完全可组合的信息窗口，作为替代。您可能想看看这是否能帮助您获得想要的结果。

Answer 2

此问题现已修复，但您必须将 slot="markers" 声明为 google-map-marker 组件的属性。

<google-map fit-to-markers latitude="44" longitude="44" api-key="your_key">
  <template is="dom-repeat" items="[[data]]">
    <google-map-marker
      slot="markers"
      title="[[item.title]]"
      icon="marker.png"
      latitude="[[item.latitude]]"
      longitude="[[item.longitude]]">
    </google-map-marker>
  </template>
</google-map>

google-dom-repeat 中的地图标记存在绑定问题

google-map-marker in dom-repeat has binding issue

polymer

google-maps-markers

web-component

google-web-component