全局变量不是全局变量-仅在函数内

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);
    }
}