Question

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

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

我尝试了不同的事情，结论如下：

如果与

一起使用，则绑定有效

<slot></slot>

标签，直接显示内容。

Infowindow组件代码：

<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>

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

Infowindow组件：

<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

你没有做任何“错误” - 它只是不起作用。自谷歌地图元素开始以来，这个以及许多相关问题已经出现在infowindow中。例如，请参阅issue 286和问题288以及随后的拉取请求中的长时间讨论。

问题在于google-map-marker 将infowindow标记复制到infowindow中，而infowindow本身位于文档的上下文中，而不是您的元素。任何绑定都会丢失，并且副本中的任何使用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>

dom-repeat中的google-map-marker有绑定问题

2 个答案: