单张panTo（或setview）功能？ [英] Leaflet panTo (or setview) function?

问题描述

我想创建一个panTo功能。当我点击一个链接地图平移到坐标。但是我不知道如何将值传递给函数。我开始给点Pointfield（pt）值这样的链接：

 < a href =＃类=markervalue ={{mymodel.pt}}> Link< / a> 
  

然后我一直在尝试：

< （click，.marker，function（e）{
e.preventDefault（）;
map .panTo（$（this）.attr（value））;
}）;

没有工作。我认为这是一个范围问题，其中函数不能读取map变量，因为它不在初始映射脚本下。

所以我的下一个想法是创建一个 panTo - 功能并将其放在inital map脚本（这将是正确的范围）下，并从click事件中调用该函数。不知道它会工作，但我想知道如何通过链接的价值？

感谢您的答案！

解决方案

您可以通过在HTML中使用数据属性来添加导航到您的地图。将纬度，经度和缩放保存到 data-position 之类的东西，然后在用户点击锚标签时，用某些JavaScript调用这些值。以下是一些代码说明。

 < div id =map> 
< div id =map-navigationclass =map-navigation> 
< a href =＃data-zoom =12data-position =37.7733，-122.4367> 
旧金山
< / a> 
< / div> 
< / div> 
 
< script> 
 var map = L.map（'map'）。setView（[51.505，-0.09]，13）; 
 
 L.tileLayer（'http：// {s} .tile.cloudmade.com / BC9A493B41014CAABB98F0471D759707 / 997/256 / {z} / {x} / {y} .png'，{
 maxZoom：18，
归属：'地图数据& copy;< a href =http://openstreetmap.org> OpenStreetMap< / a>贡献者< a href =http ：//creativecommons.org/licenses/by-sa/2.0/> CC-BY-SA< / a>，Imagery©< a href =http://cloudmade.com> CloudMade< / a> ;'
}）。addTo（map）; 
 
 document.getElementById（'map-navigation'）。onclick = function（e）{
 var pos = e.target.getAttribute（'data-position'）; 
 var zoom = e.target.getAttribute（'data-zoom'）; 
 if（pos& amp;& zoom）{
 var loc = pos.split（'，'）; 
 var z = parseInt（zoom）; 
 map.setView（loc，z，{animation：true}）; 
返回false; 
} 
} 
< / script> 
  

I want to create a panTo -function. When I click a link the map pans to the coordinates. But im not sure how to pass the value to the function. I'm starting with giving the link the Pointfield (pt) value like this:

<a href="#" class="marker" value="{{ mymodel.pt }}">Link</a>

Then I've been trying this:

$("#dialog").on("click", ".marker", function(e) {
    e.preventDefault();
    map.panTo($(this).attr("value"));
    });

That didn't work. I think it's a scope-issue where the function cant read the 'map' variable because it's not under the initial map script.

So my next idea is to create a "panTo"- function and place it under the inital map script (which would be the right scope) and call that function from the click event instead. Not sure it would work but Im wondering how to pass it the "value" from the link?

Thanks for your answers!

解决方案

You can add navigation to your map by utilizing data attributes in your HTML. Save the latitude,longitude and zoom to something like data-position and then call those values with some JavaScript when the user clicks on the anchor tag. Here's some code to illustrate.

<div id="map">
    <div id="map-navigation" class="map-navigation">
        <a href="#" data-zoom="12" data-position="37.7733,-122.4367">
            San Francisco
        </a>
    </div>
</div>

<script>
var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
            }).addTo(map);

document.getElementById('map-navigation').onclick = function(e) {
    var pos = e.target.getAttribute('data-position');
    var zoom = e.target.getAttribute('data-zoom');
    if (pos && zoom) {
        var loc = pos.split(',');
        var z = parseInt(zoom);
        map.setView(loc, z, {animation: true});
        return false;
    }
}
</script>

这篇关于单张panTo（或setview）功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！