問(wèn)題描述

我想創(chuàng)建一個(gè) panTo 函數(shù).當(dāng)我單擊鏈接時(shí)，地圖會(huì)平移到坐標(biāo).但我不確定如何將值傳遞給函數(shù).我開(kāi)始為鏈接提供 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>

然后我一直在嘗試這個(gè):

Then I've been trying this:

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

那沒(méi)用.我認(rèn)為這是一個(gè)范圍問(wèn)題，函數(shù)無(wú)法讀取地圖"變量，因?yàn)樗辉诔跏嫉貓D腳本下.

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.

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

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 屬性向地圖添加導(dǎo)航.將緯度、經(jīng)度和縮放保存到類(lèi)似 data-position 的位置，然后在用戶(hù)單擊錨標(biāo)記時(shí)使用一些 JavaScript 調(diào)用這些值.這里有一些代碼來(lái)說(shuō)明.

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>

這篇關(guān)于傳單 panTo(或 setview)功能?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！