【发布时间】：2017-06-08 12:07:05
【问题描述】：
我正在尝试使用地图制作聚合物页面，在地图中我尝试放置多个标记（使用 dom-repeat 很容易），当我单击标记时，我想显示带有组件的信息窗口inside 接受来自外部的数据并以某种方式显示它。我目前在尝试将 google-map-marker 的 dom-repeat 绑定到 infowindow 内的组件时遇到问题。
基本上，当执行 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>
我不明白这是一个错误还是我做错了什么。
【问题讨论】：
标签： polymer google-maps-markers web-component google-web-component