javascript 传单 panTo（或 setview）功能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21710530/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Leaflet panTo (or setview) function?
提问by user3199840
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:
我想创建一个 panTo 函数。当我单击链接时，地图会平移到坐标。但我不确定如何将值传递给函数。我首先为链接提供 Pointfield (pt) 值，如下所示：
<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?
所以我的下一个想法是创建一个“panTo”函数并将它放在初始地图脚本（这将是正确的范围）下，然后从点击事件中调用该函数。不确定它会起作用，但我想知道如何将链接中的“值”传递给它？
Thanks for your answers!
感谢您的回答！
回答by geraldarthur
You can add navigation to your map by utilizing dataattributes in your HTML. Save the latitude,longitude and zoom to something like data-positionand then call those values with some JavaScript when the user clicks on the anchor tag. Here's some code to illustrate.
您可以利用dataHTML中的属性向地图添加导航。保存纬度、经度并缩放到类似的data-position值，然后在用户单击锚标记时使用一些 JavaScript 调用这些值。这里有一些代码来说明。
<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 © <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>
