google-map-marker в dom-repeat имеет проблему с привязкой
Я пытаюсь сделать полимерную страницу с картой, на карте я пытаюсь поставить несколько маркеров (легко с повтором по домику), когда я нажимаю на маркер, я хочу показать информационное окно с компонентом внутри, который принимает данные извне и отображают их каким-то образом. В настоящее время у меня возникла проблема с попыткой повторения 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>
Я не понимаю, если это ошибка или я что-то не так делаю.
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-map. Например, смотрите выпуск 286, выпуск 288 и последующее длинное обсуждение запросов на извлечение.
Проблема в том, что google-map-marker копирует разметку информационного окна в информационное окно, которое находится в контексте документа, а не в вашем элементе. Любая привязка теряется, а любая способность стилизовать с использованием классов CSS теряется в копии. Это не будет исправлено, если они не откажутся от использования собственного информационного окна.
Я разработал пользовательский элемент plastic-map-info, который представляет собой полностью компонуемое информационное окно для google-map в качестве альтернативы. Возможно, вы захотите посмотреть, поможет ли это вам достичь желаемого результата.