問題描述

我對 Polymer 和 Leaflet 的 web 組件都是新手.

I am new to both Polymer and Leaflet's web component.

我想要一個按鈕來切換 Leaflet 提供的地理定位功能.在 Javascript/HTML/css 應用程序中使用 Leaflet 我會知道如何做到這一點，但我無法使用 Polymer 1.0 讓它工作.

I would like to have a button that toggles the geolocation function given by Leaflet. Using Leaflet in a Javascript/HTML/css application I would know how to do this but I can't get it to work using Polymer 1.0.

這是我的地圖元素.我調用 map.locate 的嘗試在元素注冊中被注釋掉了:

Here is my map element. My attempt to call map.locate is commented out in the element registration:

<dom-module id="my-maps">
 <style>
   ...
 </style>
  <template>
    <leaflet-map id="thismap" latitude="{{latitude}}" longitude="{{longitude}}" zoom="14"> 
      <leaflet-geolocation enable-high-accuracy latitude="{{latitude}}" longitude="{{longitude}}" watch="true">
      </leaflet-geolocation>     
      <template is="dom-if" if="{{latitude}}">
        <leaflet-marker latitude="{{latitude}}" longitude="{{longitude}}">                 
        </leaflet-marker>
      </template>
    </leaflet-map>
  </template>
  <script>
     Polymer({
      is: "my-maps",
      ready: function () {
           L.Icon.Default.imagePath="../../bower_components/leaflet/dist/images";      
           // **this.$.thismap.locate({setView: true}); // not working**
       } 

   });
  </script>
</dom-module>

對于這個例子，我得到這個錯誤:無法讀取未定義的屬性thismap"

For this example I get this error: Cannot read property 'thismap' of undefined

如果我直接引用'this'(this.locate())，返回的錯誤是:this.locate 不是函數

If I refer to 'this' directly (this.locate()), the error returned is: this.locate is not a function

(此片段只是一個測試；理想情況下，定位函數將由來自 'geoButton' 元素的點擊事件調用):

(this snippet is just a test; ideally the locate function would be called by a click event from the 'geoButton' element) :

      <div flex>
           <ir-maps id="mymap" class="basemap" flex></ir-maps> 
           <ir-geoButton class="geoButton" ></ir-geoButton>
      </div>

推薦答案

我的解決方案沒有明確使用 map.locate.這不是必需的，因為 map.locate 是通過添加 leaflet-geolocation 元素啟用的.

My solution does not use map.locate explicitly. This was not needed, as map.locate is enabled by adding the leaflet-geolocation element.

我從小冊子地圖元素中刪除了緯度和經度屬性(并添加了一些其他參數):

I removed the latitude and longitude property from the leaflet-map element (and added a few other parameters):

        <leaflet-map 

        id="nycmap" zoom="14" 
        min-zoom="14" 
        max-zoom="18" 
        nozoomControl="true"
        noattributionControl:="false">

然后我在leaflet-map元素(leaflet-core.html)的注冊中添加了一個一次性監聽器，這樣如果啟用了地理定位，地圖就會縮放到那個位置，如果沒有，它會縮放到那個位置縮放到默認中心點.'geoB' 是一個切換地理定位功能的按鈕:

Then I added a one-time listener to the registration of the leaflet-map element (leaflet-core.html), so that if geolocation is enabled, the map will zoom to that location, and if it is not it will zoom to a default center point. 'geoB' is a button that toggles the geolocation function:

            map.addOneTimeEventListener('locationfound', function (e){

            console.log("get to located found?");           
            map.setView(L.latLng(e.latitude, e.longitude), 14);
            var geo = document.getElementById('geoB');
            var state = geo.classList.toggle('toggleState');
        }, this);



        map.on('locationerror', function(e){
            console.log("get to located error?");
            map.setView(L.latLng(40.6889, -73.9444), 14);
            map.stopLocate();
        }, this);

我向 Leaflet-map 元素添加了另一個功能，以便我可以將當??前緯度和經度傳遞給元素并縮放到該點，點擊地理定位按鈕:

I added another function to the leaflet-map element so that I can pass the current latitude and longitude to the element and zoom to that point, on the click on the geolocation button:

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

        }

    },

最后，這個函數在 geoButton 元素的事件監聽器中被調用，它引用了 leaflet-geolocation 元素:

Finally, this function is called in an event listener in the geoButton element, which references the leaflet-geolocation element:

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

這篇關于如何將 map.locate 與 Polymer 1.0/leaflet-map 1.0 一起使用的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！