简体   繁体   English

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

[英]Polymer 1.0 custom element in leaflet-map not working

can anybody explain why the following 2 snippets do not have the same effect / what am I doing wrong at the 2nd : 谁能解释为什么以下两个代码片段效果不一样/我在第二个代码中做错了什么:

Working (got the marker on the 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>

But if I just replace the leaflet-marker with a custom element containing the leaflet-marker it does not work : 但是,如果我只用包含小叶标记的自定义元素替换小叶标记,它将无法正常工作:

<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>

Finally got a quite clean solution. 终于有了一个很干净的解决方案。 The issue was that the map populates itself as "container" when it finished loading (leaflet-core.html, method registerMapOnChildren). 问题在于,地图在加载完成后会自动填充为“容器”(leaflet-core.html,方法registerMapOnChildren)。 So i had to add a container-object to my contact-map-item and pass it to the marker : 所以我不得不在我的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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在Polymer 1.0 / Leaflet-map 1.0中使用map.locate - how to use map.locate with Polymer 1.0 / leaflet-map 1.0 在Polymer 1.0中动态创建的标记/传单地图无法在Firefox中呈现 - dynamically created marker in Polymer 1.0 / leaflet-map does not render in Firefox 图层控件移出地图元素时未发出传单地图点击事件 - Leaflet-map click event not emitted when layer controls moved out of map-element 为 react-component 提供传单地图 - provide leaflet-map to react-component 如何在Polymer 1.0中调用元素的自定义方法? - How to call custom method of a element in Polymer 1.0? 有没有办法在传单地图上编辑现有的geojson数据 - Is there any way to edit existing geojson data on the leaflet-map 如何使用来自 Supabase 数据库的坐标将标记添加到传单地图? - How to add Markes to a Leaflet-map with coordinates from Supabase database? 聚合物1.0中的Element.clientWidth / .clientHeight 1.0 /传单0.7.3 - Element.clientWidth / .clientHeight in polymer 1.0 / leaflet 0.7.3 聚合物1.0:如何使该自定义元素具有声明性? - Polymer 1.0: how to make this custom element declarative? 在聚合物1.0中,在自定义元素中导入聚合物按钮会产生错误 - In polymer 1.0 Importing polymer-button in a custom element gives error
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM