Question

所以我创建了一个网站，根据用户使用jQuery的当前位置向地图添加标记。我以前从未使用过jQuery，所以我在非常基本的问题上挣扎，这是我到目前为止在剧本中遇到的两个问题。

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

2）返回$（＆＃34; #back_btn＆＃34;）。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 var map处理程序的匿名函数中有效地定义了ready。

变化：

$(function() {

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

  ...
});

要：

var map;

$(function() {

  map = L.map ("map1");

  ...
});

这样您就可以全局访问map。

jQuery：为地图创建全局变量

1 个答案: