我正在尝试使用地图制作聚合物页面,在地图中我试图放置多个标记(使用 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>
我不明白这是一个错误还是我做错了什么。