Javascript 传单panTo（或setview）功能？

我想创建一个panTo函数。当我单击链接时，地图平移到坐标。但是我不知道如何将值传递给函数。我首先给出链接的Pointfield（pt）值，如下所示：

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

那没用。我认为这是一个范围问题，函数无法读取“map”变量，因为它不在初始map脚本下

因此，我的下一个想法是创建一个“panTo”函数，并将其放在inital map脚本（这将是正确的范围）下，然后从click事件调用该函数。不确定它会工作，但我想知道如何传递它的“价值”从链接

---

谢谢你的回答

您可以利用HTML中的

数据
属性向地图添加导航。保存纬度、经度和缩放到类似
数据位置的位置
，然后在用户单击锚定标记时使用一些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 &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>


var map=L.map（'map'）.setView（[51.505，-0.09]，13）；
L.tileLayer（'http://{s}.tile.cloudmake.com/bc9a493b41014caab98f0471d759707/997/256/{z}/{x}/{y}.png'{
maxZoom:18，
属性：“地图数据&复制；贡献者，图像©”
}).addTo（地图）；
document.getElementById（'map-navigation'）。onclick=function（e）{
var pos=e.target.getAttribute（'data-position'）；
var zoom=e.target.getAttribute（'data-zoom'）；
如果（位置和缩放）{
var loc=位置拆分（'，'）；
var z=parseInt（缩放）；
setView（loc，z，{animation:true}）；
返回false；
}
}
要求澄清：您希望地图上有一个指向该位置的动画平移，还是仅仅根据按钮查看一个位置？自早期版本的传单以来，前者一直不受支持，但后者绝对可行。嘿，谢谢你的回答！哪一个并不重要。我想要的是能够在一个对话框中列出数据库中的一些对象，并以地图为背景。每个对象都有一个链接，当您单击它时，地图将转到坐标。差不多吧，太棒了！回答得很好。我会玩这个，看看我能不能让它工作！谢谢，我正在尝试将脚本放在我的“$（document）.ready（function（）{”下我还声明了我的地图、平铺层和其他一些连接到地图的函数。我想知道我是否必须以某种方式包装它？或者我是否也需要声明对话框？因为我已经将锚链接放在了一个子html中，并将其加载到主页上的jquery对话框中。
<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>