我想创建一个 panTo 函数。当我单击链接时,地图会平移到坐标。但我不确定如何将值传递给函数。我首先为链接提供点场 (pt) 值,如下所示:
<a href="#" class="marker" value="{{ mymodel.pt }}">Link</a>
然后我一直在尝试这个:
$("#dialog").on("click", ".marker", function(e) {
e.preventDefault();
map.panTo($(this).attr("value"));
});
那行不通。我认为这是一个范围问题,函数无法读取“map”变量,因为它不在初始地图脚本下。
所以我的下一个想法是创建一个“panTo”函数并将其放置在初始地图脚本(这将是正确的范围)下,然后从单击事件调用该函数。不确定它是否有效,但我想知道如何从链接传递“值”?
感谢您的回答!
您可以使用以下方式向地图添加导航data
HTML 中的属性。将纬度、经度和缩放保存为类似的值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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)