传单地图中的 Polymer 1.0 自定义元素不起作用

Question

任何人都可以解释为什么以下 2 个片段没有相同的效果/我在第 2 个做错了什么：

工作中（得到地图上的标记）：

<dom-module id="odl-map">
<template>
    <leaflet-map id="innerMap" style="width:100%;height:100%;" latitude="50.92062" longitude="13.34081" zoom="10">
        <leaflet-marker latitude="50.92062" longitude="13.34081"></leaflet-marker>
    </leaflet-map>
</template>
<script>
 Polymer({
     is: "odl-map",
     ready: function() {
         L.Icon.Default.imagePath="./public/components/leaflet/dist/images";
     }
 });
</script>

但是，如果我只是将传单标记替换为包含传单标记的自定义元素，则它不起作用：

<dom-module id="contact-map-item">
<template>
    <leaflet-marker latitude="50.92062" longitude="13.34081"></leaflet-marker>
</template>
<script>
    Polymer({
        is: "contact-map-item"
    })
</script>
</dom-module>
<dom-module id="odl-map">
    <template>
        <leaflet-map id="innerMap" style="width:100%;height:100%;" latitude="50.92062" longitude="13.34081" zoom="10">
            <contact-map-item></contact-map-item>
        </leaflet-map>
    </template>
    <script>
     Polymer({
         is: "odl-map",
         ready: function() {
             L.Icon.Default.imagePath="./public/components/leaflet/dist/images";
         }
     });
    </script>
</dom-module>

Answer 1

终于得到了一个非常干净的解决方案。问题是地图在完成加载时将自身填充为 "container"（leaflet-core.html，方法 registerMapOnChildren）。所以我必须将容器对象添加到我的 contact-map-item 并将其传递给标记：

<dom-module id="contact-map-item">
<template>
    <leaflet-marker container="{{container}}" latitude="50.92062" longitude="13.34081"></leaflet-marker>
</template>
<script>
    Polymer({
        is: "contact-map-item",
        properties: {container : Object}
    });
</script>
</template>

传单地图中的 Polymer 1.0 自定义元素不起作用

Polymer 1.0 custom element in leaflet-map not working

javascript

web-component

leaflet

polymer