全局變量不是全局變量-僅在函數內

Question

我觀察訪客的位置並將當前坐標存儲在兩個變量中，即latitude和longitude 。 當訪客點擊地圖時，新標記的坐標將存儲在另外兩個變量click_latitude和click_longitude 。

完成此操作后，我想在span .test以文本形式顯示標記的坐標。 問題是， coordinates_click （包含click_latitude和click_longitude ）始終是空的！ 標記的坐標僅存儲在map.on('click', function(e1) { ... }中的變量中map.on('click', function(e1) { ... }無法在函數外部訪問。

為什么以及如何解決此問題？

if(navigator.geolocation) {

    // VARIABLES
    var gps_timeout = 10 * 1000 * 1000;


    // MAP
    map = L.map('map', {
        maxZoom: 17,
        minZoom: 7
    }).setView([59.380767, 13.503022], 13);

    // MAP (copyright)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data © OpenStreetMap contributors'
    }).addTo(map);


    // GPS
    navigator.geolocation.watchPosition(success, error, {
        enableHighAccuracy: true,
        timeout: gps_timeout,
        maximumAge: 0
    });


    // ADD MARKER
    map.on('click', function(e1) {

        // IF
        if(typeof(marker) === 'undefined') {
            marker = new L.marker(e1.latlng).addTo(map);

            var position = marker.getLatLng();
            var click_latitude = position.lat.toFixed(6);
            var click_longitude = position.lng.toFixed(6);
            map.panTo(new L.LatLng(click_latitude, click_longitude));

        // IF
        } else {
            marker.setLatLng(e1.latlng);

            var position = marker.getLatLng();
            var click_latitude = position.lat.toFixed(6);
            var click_longitude = position.lng.toFixed(6);
            map.panTo(new L.LatLng(click_latitude, click_longitude));
        }

    });


// IF
} else {
    // error handler
}



function success(position) {

    // VARIABLES
    latitude = position.coords.latitude.toFixed(6);
    longitude = position.coords.longitude.toFixed(6);
    coordinates_current = latitude + ',' + longitude;
    coordinates_click = window.click_latitude + ',' + window.click_longitude;


    // IF
    if(coordinates_click !== '') {
        $('.test').text(coordinates_click);
    }

}

如果您想嘗試，請訪問https://erik-edgren.nu/map 。 上面的代碼已更新為當前代碼。 請在下面查看我的答案。

Answer 1

因此，您是在事件函數 （地圖click處理程序和success函數）的局部聲明click_latitude和click_longitude 。 var聲明始終具有函數作用域。

如果希望在多個函數之間共享變量，則可以使用閉包 （另請參見此答案 ）：

$(document).ready(function() {
    var click_latitude, click_longitude;
    ...
    map.on('click', function(e1) {
        click_latitude = ...
        click_longitude = ...
    }
    ...
    function success(position) {
        var coordinates_click = click_latitude + ',' + click_longitude;
        $('.test').text(coordinates_click);
    }
}

或全局變量（ window 對象的屬性 ）：

$(document).ready(function() {
    ...
    map.on('click', function(e1) {
        window.click_latitude = ...
        window.click_longitude = ...
    }
    ...
    function success(position) {
        var coordinates_click = window.click_latitude + ',' + window.click_longitude;
        $('.test').text(coordinates_click);
    }
}