javascript - jQuery:为 map 创建全局变量

Question

因此，我正在创建一个网站，该网站使用 jQuery 根据用户的当前位置向 map 添加标记。我以前从未使用过 jQuery，所以我在非常基本的问题上苦苦挣扎，这是迄今为止我在脚本中遇到的两个问题。

1) map 不是全局变量，因此在过程位置函数中，我无法向 map 添加标记，我假设如果我在任何函数之外创建 map 变量，这会正常工作，但是我仍然得到一个错误。我知道这可能是一个非常小的问题，但我需要能够引用 map 变量，以便我可以在其他函数中添加标记。

2) 返回 $("#back_btn").click(function() 有效地尝试将分区的内容重置为之前的内容，更改按钮功能将其更改为搜索脚本，该脚本将搜索用户选择的位置。虽然它或多或少地重置了它，但再次单击时 #change_btn 不起作用，我使用克隆方法复制表单的元素，尽管完全相同的按钮再次出现或功能消失，为什么会这样呢？

 $(function() {

    var map = L.map ("map1");

    $("#change_btn").hide();

    $("#back_btn").hide();

    var old_form = $("#location_form").clone(); 

    var attrib="Map data copyright OpenStreetMap contributors, Open Database Licence";

    L.tileLayer ("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                { attribution: attrib } ).addTo(map);

    var lat = 50.908;

    var lon = -1.4;

    var pos = [lat, lon];

    var marker = L.marker(pos).addTo(map);

    map.setView(pos, 6);

    var popup = document.createElement("popup");

    var placeinfo = document.createTextNode("Your current location: " + "Latitude: " + lat + "Longitude" + lon); 

    popup.appendChild(placeinfo);

    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition (processPosition, handleError);
    }
    else
    {
        alert("Sorry, geolocation not supported in this browser");
    }   

    $("#find_btn").click(function () { 
        if ("geolocation" in navigator){ 
            navigator.geolocation.getCurrentPosition(processPosition, handleError);
        }
        else{
            console.log("Browser doesn't support geolocation!");
        }
    });

    $("#change_btn").click(function(){

        $("#location_form").load("scripts/searchlocation.php");

        $("#back_btn").css("display", "inline-block"); 

    }); 

    $("#back_btn").click(function(){

        $("#location_form").empty();

        $("#location_form").html(old_form); 

        $("#change_btn").css("display", "inline-block"); 

        $("#back_btn").hide();

        $("#find_btn").hide();
    }); 

});

function processPosition(gpspos)
{
    var info = 'Lat: ' + gpspos.coords.latitude + ' lon: ' + gpspos.coords.longitude;

    $("#result").html(info);
    $("#change_btn").css("display", "block"); 
    $("#find_btn").css("display", "none"); 

    var lat = gpspos.coords.latitude;

    var lon = gpspos.coords.longitude;

    alert("Latitude: " + lat + " Longitude: " + lon);

    var pos = [lat, lon];

    var marker = L.marker(pos).addTo(map);

    map.setView(pos, 6);

    var popup = document.createElement("popup");

    var placeinfo = document.createTextNode("Your current location: " + "Latitude: " + lat + "Longitude" + lon); 

    popup.appendChild(placeinfo);

}

function handleError(err)
{
    alert('An error occurred: ' + err.code);
}       

很抱歉提出这些问题，我非常感谢您能给我的任何帮助，

感谢您的宝贵时间；

雅克

Answer 1

您遇到了范围问题，因为您在 jQuery DOM ready 处理程序的匿名函数中有效地定义了 var map。

更改:

$(function() {

  var map = L.map ("map1");

  ...
});

致:

var map;

$(function() {

  map = L.map ("map1");

  ...
});

以便您可以全局访问 map 。