1

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

基本上,当执行 dom-repeat 并且创建的标记在 infowindow 组件中正确设置时,数据会在 infowindow 组件中正确设置,但是在此时和显示 infowindow 之间的某个地方,数据会丢失,并且现在设置的所有内容都未定义。

我尝试了不同的方法,得出的结论如下:

如果与 a 一起使用,则绑定有效

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

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

在此处输入图像描述

4

2 回答 2

1

你没有做任何“错误”的事情——它只是行不通。自从 google-map 元素出现以来,infowindow 就一直存在这个问题和许多相关问题。例如,请参阅issue 286和 issue 288 以及随后的拉取请求中的长时间讨论。

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

我开发了一个自定义元素plastic-map-info,它是一个完全可组合的 google-map 信息窗口作为替代。您可能想看看这是否有助于您实现您正在寻找的结果。

于 2017-08-29T01:20:15.603 回答
1

现在已修复此问题,但您必须将其声明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>
于 2018-05-02T19:21:39.880 回答