問題描述

我想創建一個 panTo 函數.當我單擊鏈接時，地圖會平移到坐標.但我不確定如何將值傳遞給函數.我開始為鏈接提供 Pointfield (pt) 值，如下所示:

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.

所以我的下一個想法是創建一個panTo"- 函數并將其放在初始地圖腳本(這將是正確的范圍)下，然后從點擊事件中調用該函數.不確定它會起作用，但我想知道如何從鏈接中傳遞值"?

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?

感謝您的回答！

推薦答案

您可以利用 HTML 中的 data 屬性向地圖添加導航.將緯度、經度和縮放保存到類似 data-position 的位置，然后在用戶單擊錨標記時使用一些 JavaScript 調用這些值.這里有一些代碼來說明.

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 >OpenStreetMap</a> contributors, <a >CC-BY-SA</a>, Imagery ? <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)功能?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！