google-map-marker в dom-repeat имеет проблему с привязкой

Question

Я пытаюсь сделать полимерную страницу с картой, на карте я пытаюсь поставить несколько маркеров (легко с повтором по домику), когда я нажимаю на маркер, я хочу показать информационное окно с компонентом внутри, который принимает данные извне и отображают их каким-то образом. В настоящее время у меня возникла проблема с попыткой повторения dom-google-map-marker с привязкой информации, передаваемой компоненту внутри информационного окна.

В основном, когда выполняется 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>

Привязка не работает, если используется со свойством, предоставляемым таким компонентом:

Компонент информационного окна:

<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

Это сейчас исправлено, но вы должны объявить 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>

Answer 2

Вы не делаете ничего "неправильного" - это просто не работает. Это и множество связанных с этим проблем присутствовали в информационном окне с момента создания элемента google-map. Например, смотрите выпуск 286, выпуск 288 и последующее длинное обсуждение запросов на извлечение.

Проблема в том, что google-map-marker копирует разметку информационного окна в информационное окно, которое находится в контексте документа, а не в вашем элементе. Любая привязка теряется, а любая способность стилизовать с использованием классов CSS теряется в копии. Это не будет исправлено, если они не откажутся от использования собственного информационного окна.

Я разработал пользовательский элемент plastic-map-info, который представляет собой полностью компонуемое информационное окно для google-map в качестве альтернативы. Возможно, вы захотите посмотреть, поможет ли это вам достичь желаемого результата.