传单 panTo（或 setview）功能？

Question

我想创建一个 panTo 函数。当我单击链接时，地图会平移到坐标。但我不确定如何将值传递给函数。我开始为链接提供 Pointfield (pt) 值，如下所示：

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

然后我一直在尝试这个：

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

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

所以我的下一个想法是创建一个“panTo”- 函数并将其放在初始地图脚本（这将是正确的范围）下，然后从 click 事件中调用该函数。不确定它会起作用，但我想知道如何从链接中传递“值”？

感谢您的回答！

Answer 1

您可以利用 HTML 中的 data 属性向地图添加导航。将纬度、经度和缩放保存为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 &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>