Question

我会观察访问者的位置，并将当前坐标存储在两个变量latitude和longitude中。当访问者点击地图时，新标记的坐标将存储在另外两个变量click_latitude和click_longitude中。

完成后，我想在范围.test中将标记的坐标显示为文本。问题是coordinates_click（包含click_latitude和click_longitude）总是空的！标记的坐标仅存储在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 &copy; 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_latitude和click_longitude （映射click处理程序和success函数）。 var声明始终具有函数范围。

如果您希望在多个功能之间共享变量，可以使用closure（另请参阅此answer）：

$(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 object的属性）：

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

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

1 个答案: