Переменная не определена после изменения jQuery

Question

var circle = new google.maps.Circle({
    center: latLng,
    radius: radius,
    strokeColor: "#FF0000",
    strokeOpacity: 0.5,
    strokeWeight: 1,
    fillColor: "#FF0000",
    fillOpacity: 0.2
});

circle.setMap(map);

map.fitBounds(circle.getBounds());

jQuery('#area').change(function() {
    radius = jQuery('#area').val();

    var newLatLng = marker.getPosition();

    circle.setMap(null);

    var circle = new google.maps.Circle({
        center: latLng,
        radius: radius,
        strokeColor: "#FF0000",
        strokeOpacity: 0.5,
        strokeWeight: 1,
        fillColor: "#FF0000",
        fillOpacity: 0.2
    });

    circle.setMap(map);

    map.fitBounds(circle.getBounds());
});

circle определено вне jQuery('#area').change(), но когда я пытаюсь получить к нему доступ из функции jQuery('#area').change(), я получаю неопределенную ошибку. Почему это?

Answer 1

Поскольку ваша внутренняя функция содержит var circle. Из-за явления, известного как «var hoisting», вся функция рассматривает circle как локальную переменную, хотя оператор var появляется позже.

Назовите круг вашей внутренней функции как-нибудь еще.

Answer 2

Внутри вашей функции .change измените эту строку:

var circle = new google.maps.Circle({

на эту:

circle = new google.maps.Circle({

Как вы это делали, вы создавали новую локальную переменную с именем circle и устанавливаете его значение, а вы не устанавливаете значение глобального определения circle.Затем, когда вы приходите в следующий раз и набираете circle.setMap(null) на глобальном, он все равно равен нулю.

Итак, если вы хотите работать только с глобальным определением круга, то удалите var, как указано выше в функции .change().Если вы намеревались создать новый объект временного круга для использования только во время этой функции .change(), которая не сохранится после выполнения этой функции, то назовите эту локальную копию чем-то отличным от circle.