Question

我在使用Polymer 1.0和leaflet-map 1.0的HTML页面的一部分中有一个map元素：

         <section data-route="Page">
          <div flex>
              <my-maps id="mymap"  flex></my-maps> 
          </div>
        </section>

我正在尝试向元素添加一个事件，该元素会在平移地图时将中心坐标的纬度/经度传递到控制台窗口，类似于此处给出的“事件”示例：Polymer Leaflet demo < / p>

问题是Lat / Long坐标不会更新;我只看到起始中心点的中心坐标。地图最初应以地理定位点为中心打开，并在该点处标记。我已经尝试将事件脚本添加到主索引页面，并将元素注册添加到：

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

     listeners:{
       'moveend': 'testmove'
      },
     testmove: function(e){
        var text = "Center: " + this.latitude.toFixed(9)
                          + ", " + this.longitude.toFixed(9);
        console.log(text); 
      }

 });
 </script>

......但在两种情况下我都得到相同的结果;触发事件，但只将初始中心点坐标传递给控制台。

以下是my-maps元素的HTML：

<dom-module id="my-maps">
<style>
:host {
    height: 100%;
        width:100%;
        overflow:hidden;
    }
leaflet-map {
    position:absolute;
        height: 900px;
        width:100%;
        overflow:hidden;
    }
</style>
<template>
  <leaflet-map latitude="{{latitude}}" longitude="{{longitude}}" zoom="14"> 
    <leaflet-geolocation enable-high-accuracy latitude="{{latitude}}" longitude="{{longitude}}">
     </leaflet-geolocation>     
        <template is="dom-if" if="{{latitude}}">
        <leaflet-marker latitude="{{latitude}}" longitude="{{longitude}}">                 
        </leaflet-marker>
        </template>
  </leaflet-map>
</template>

(Polymer registration here)
</dom-module>

我也尝试将监听器添加到leaflet-map标签（on-moveend），我尝试在dom-module元素内外移动注册，但结果相同。我在地图中添加了一个id，并按照Ricky的建议为该实例分配了lat和long，但现在地理定位点移动到每个地图平底锅的中心（它应该保留在地理定位点上。）

Answer 1

要使标记停留在地理位置点，但更新中心位置，只需向id添加leaflet-map并抓住latitude和{{1属性：

longitude

Answer 2

我基本上回答了我的扩展问题here。我的解决方案涉及编辑leaflet-map元素本身，通过为geolocator提供的初始纬度和经度添加一次性监听器。如果地理定位器失败，则地图将平移到默认位置。我从自定义地图元素中的leaflet-map元素标记中删除了纬度和经度属性。

Polymer 1.0 / leaflet-map 1.0：lat / long不会在moveend事件

2 个答案: