如何在Polymer 1.0 / leaflet-map 1.0中使用map.locate [英] how to use map.locate with Polymer 1.0 / leaflet-map 1.0
问题描述
我对Polymer和Leaflet的web组件都是新手。
我想要一个按钮来切换Leaflet提供的地理定位功能。在Javascript / HTML / css应用程序中使用Leaflet我会知道如何做到这一点，但我无法使用Polymer 1.0来使用它。
这是我的地图元素。我尝试调用map.locate在元素注册中被注释掉：
< dom-module id =my-maps >
< style>
...
< / style>
< template>
< template is =dom-ifif ={{latitude}}>
< leaflet-marker latitude ={{latitude}}longitude ={{longitude}}>
< / leaflet-marker>
< / template>
< / leaflet-map>
< / template>
< script>
Polymer（{
是：my-maps，
ready：function（）{
L.Icon.Default.imagePath =../../ bower_components /传单/分区/图像;
// ** this。$。thismap.locate（{setView：true}）; // not working **
}
} ）;
< / script>
< / dom-module>
对于这个例子，我得到这个错误：
无法读取未定义的属性'thismap' / p>
如果直接引用'this'（this.locate（）），返回的错误是：
this.locate不是函数
（这段代码只是一个测试;理想情况下，定位函数将被来自'geoButton'元素的点击事件调用）：
< div flex>
< ir-maps id =mymapclass =basemapflex>< / ir-maps>
< ir-geoButton class =geoButton>< / ir-geoButton>
< / div>
我的解决方案不明确使用map.locate。这是不需要的，因为map.locate是通过添加leaflet-geolocation元素来启用的。
我从leaflet-map元素中删除了纬度和经度属性（并添加了一些其他参数）：
< leaflet-map
id =nycmapzoom = 14
min-zoom =14
max-zoom =18
nozoomControl =true
noattributionControl：=false>
然后我添加了一次侦听器来注册leaflet-map元素（leaflet-core .html），因此如果地理位置已启用，地图将缩放到该位置，如果不是，则会缩放到默认中心点。 'geoB'是一个切换地理位置功能的按钮：
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）;
$ b map.on（'locationerror'，function（e）{
console.log（get to located error？）;
map.setView（L.latLng（40.6889，-73.9444），14）;
map.stopLocate（）;
}，this）;
我在传单映射元素中添加了另一个函数，以便我可以将当前的经度和纬度传递给元素和缩放到这一点，点击地理定位按钮：
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元素：
nycmap.setToPoint（locator .latitude，locator.longitude）;
I am new to both Polymer and Leaflet's web component.
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.
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>
For this example I get this error: Cannot read property 'thismap' of undefined
If I refer to 'this' directly (this.locate()), the error returned is: this.locate is not a function
(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>
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">
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);
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();
});
}
},
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);
这篇关于如何在Polymer 1.0 / leaflet-map 1.0中使用map.locate的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
