聚合物1.0 /传单地图：如何实现传单功能到Web组件

此问题是a previous question of mine的扩展。我对聚合物1.0和传单地图Web组件都是新手，到目前为止，我无法使用任何传单功能，我已经轻松地在基于Javascript/HTML/CSS的Leaflet Web应用程序中使用了这些功能。聚合物1.0 /传单地图：如何实现传单功能到Web组件

例如，我想将地图视图设置为在地图上点击的中心。我尝试这种想法的一些变型中，基于一些实施例I对SO发现：在HTML

地图元素：

<leaflet-map id="thismap" latitude="{{latitude}}" longitude="{{longitude}}" zoom="14" >

地图要素登记：

<script> 
Polymer({ 
    is: "my-maps", 
    ready: function() { 
     L.Icon.Default.imagePath="../../bower_components/leaflet/dist/images";  

    }, 
    attached: function(){ 
     this.map = L.map(thismap); 
    }, 
    listeners:{ 
    'tap': 'testmove' 
    }, 
    testmove: function(e){ 
    console.log("tapped");  
    this.map.setView([40.675951373, -73.989100456], 14); 
    console.log("map center: "+this.map.getCenter()); 
    } 
}); 
</script>

在这种情况下，“getCenter '输出在'setView'中分配的中心点，但是可见的地图并没有像我希望的那样平移到这个点的中心。

我无法在leaflet-map文档或任何其他显示此类排序的动态功能的地方找到任何示例（地图调整大小，点击按钮等）。想法？

来源

2015-10-14 JasonBK

我发现的关键是编写依赖于传单地图核心元素（leaflet-core.html）内的传单源函数的任何方法。

（在瓣叶core.html）

Polymer({ 
    is: 'leaflet-map', 

... 

map.on('click', function(e) {      
      this.map.setView([e.latlng.lat, e.latlng.lng], this.map.zoom); 
     }, this); 

.... 

});

一个问题是，“水龙头”不是在瓣叶core.html定义的事件之一，所以我不得不使用“点击”。但是这个测试目的就足够了。

来源

2015-10-22 16:58:45 JasonBK

我不熟悉的传单，但对于这个特定的问题你的问题可能是在attached方法一个错字：

thismap = L.map(this, {

应该

this.map = L.map(this, {

这样的mapthis上的财产设置为任何L.map返回。然后在testmovethis.map应该设置。

来源

2015-10-16 23:00:51 Taylor

@Taylpor对不起，这是一个错字，我解决了这个问题，并添加了一些清晰的地图html元素。我也从地图构造函数中删除了中心和缩放属性;它们在地图元素标记中被设置为绑定属性。在这种情况下，我不会收到任何错误，但我也没有从'setVIew'得到任何响应，它应该将地图范围重置为该点的中心。我在上面添加了一个'getCenter函数;请参阅我的问题中的其他评论。 – JasonBK

ps - 我也尝试将leaflet map构造函数赋值给这个。$。map，并将其用于map函数，并得到相同的结果...就好像this.map（或this。$。map）是地图元素的ID与“thismap”不同的地图实例。 – JasonBK

聚合物1.0 /传单地图：如何实现传单功能到Web组件

回答

相关问题