Polymer 1.0 / leaflet-map：如何将Leaflet功能实现到web组件

Question

这个问题是的延伸。我是 Polymer 1.0 和 leaflet-map web 组件的新手，到目前为止，我无法使用我在 Javascript / HTML / CSS 中轻松使用的任何 Leaflet 功能基于 Leaflet 网络应用程序。

例如，我想将地图视图设置为以点击地图为中心。基于我在 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 文档或其他任何地方找到任何示例来显示此类任何类型的动态功能（通过单击调整地图大小、按下按钮等）。想法？

Answer 1

我不熟悉 Leaflet，但对于这个特定问题，您的问题可能是 attached 方法中的错字：

thismap = L.map(this, {

应该是

this.map = L.map(this, {

这样 this 上的 map 属性将设置为任何 L.map returns。然后在testmove中应该设置this.map。

Answer 2

我发现的关键是在 leaflet-map 核心元素 (leaflet-core.html) 中编写任何依赖于 Leaflet 源函数的方法。

（传单中-core.html）

Polymer({
    is: 'leaflet-map',

 ...

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

....

});

一个问题是 'tap' 不是 leaflet-core.html 中定义的事件之一，所以我不得不使用 'click'。但这足以满足此测试目的。

Polymer 1.0 / leaflet-map：如何将Leaflet功能实现到web组件

Polymer 1.0 / leaflet-map: how to implement Leaflet functions to web components

zooming

latitude-longitude

web-component

leaflet

polymer-1.0