Polymer 1.0/leaflet-map 1.0 地图在单击按钮时不会始终返回到给定点答案

【问题标题】：Polymer 1.0 / leaflet-map 1.0 Map not consistently returning to given point on button clickPolymer 1.0/leaflet-map 1.0 地图在单击按钮时不会始终返回到给定点
【发布时间】：2016-01-19 15:51:01
【问题描述】：

我正在尝试使用 Polymer 1.0 和 Leaflet-map 1.0 实现地图，它有一个按钮，单击该按钮时应将地图平移到当前地理位置的中心。

地图（'mymap'）和'geoButton'是主索引页面中同一级别的元素。我有一些工作，但不一致。

地图是这样设置的（现在初始中心是硬编码的）：

        <leaflet-map id="mymap"  latitude="40.707149800" longitude="-74.002101900"   zoom="14">

          <leaflet-geolocation id="locator"  enable-high-accuracy latitude="{{latitude}}" longitude="{{longitude}}" watch="true">
          </leaflet-geolocation>
       ...

在 geoButton 元素中，我将定位器 lat 和 long 分配给单击按钮时的地图 lat 和 long：

    mymap.latitude = locator.latitude;
    mymap.longitude = locator.longitude;

在 Leaflet-core.html（它具有从 Leaflet.js 继承的属性和事件）中，纬度和经度属性都有一个观察者方法“_viewChanged”：

    _viewChanged: function(newValue, oldValue) {

        if (this.map) {

        this.async(function() {

                this.map.setView(L.latLng(this.latitude, this.longitude), this.zoom);

                console.log("new lat? " +this.latitude );
                console.log("new long? " +this.longitude );

            });

        }

    }

问题是地图并不总是重置到新的中心。如果我将地图平移到远离初始点的位置，然后单击 geoButton，它将重新居中（调用“viewreset”事件）。此外，如果我在单击 geoButton 后完全拖动地图，地图将重置到正确的中心。

如果我删除观察者方法中的异步函数，并直接调用“this.map.setView”，地图实际上会重新正确定位到地理定位点。但是在这种情况下，如果我平移地图，它将“反弹”回地理定位的纬度（无论我平移地图，经度都会保持不变）。我认为这是因为'_viewChanged'被调用了两次，但第二次纬度与第一次调用相比没有改变。

我是否可以在调用 this.map/.setView 之前在观察者方法中强制对地图进行某种重置或刷新（在调用该方法后拖动地图时似乎会发生这种情况）？或者，我这里还有什么遗漏的吗？

经过更多测试，我注意到如果我注释掉：

 // mymap.latitude = locator.latitude;

然后地图将缩放到正确的（地理定位的）经度，但将保持在单击按钮之前地图设置的任何纬度...如果我注释掉经度线也是如此；然后地图平移到正确的（地理定位的）纬度和当前经度。换句话说，我可以正确传递一个更新的属性，但不能传递两个……都使用相同的观察者方法。

【问题讨论】：

标签： leaflet latitude-longitude polymer-1.0 web-component observers

【解决方案1】：

我找到了解决方案。关键是在leaflet-core 元素中添加一个函数，这样我就可以同时传递新的纬度和经度，然后在按钮的事件处理程序中调用该方法：

（在 Leaflet-core.html 中）

     setToPoint: function(newLat, newLong){
        if (this.map) {
            this.async(function() {
              this.map.setView(L.latLng(newLat, newLong), this.zoom, {pan: {animate: true}});
              this.map.invalidateSize();
            });

        }

     },

（在 geobutton 元素中 - 点击回调）

mymap.setToPoint(locator.latitude, locator.longitude);

【讨论】：