javascript - leaflet-map 中的 Polymer 1.0 自定义元素不起作用

Question

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

工作(在 map 上找到标记):

<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

终于得到了一个相当干净的解决方案。问题是 map 在完成加载后将自身填充为“容器”(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>