问题描述
我对 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 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！