未捕获类型错误:不能调用方法'val'的定义

Uncaught TypeError: Cannot call method 'val' of undefined

本文关键字：val 定义方法调用类型错误不能更新时间：2023-09-26

我很难受。这是我正在使用的代码:

http://jsfiddle.net/arunpjohny/Jfdbz/

$(function () {
    var lastQuery  = null,
        lastResult = null, // new!
        autocomplete,
        processLocation = function (input, lat, long, callback) { // accept a callback argument
            var query = $.trim(input.val()),
                geocoder;
            // if query is empty or the same as last time...
            if (!query || query === lastQuery) {
                if (callback) {
                    callback(lastResult); // send the same result as before
                }
                return; // and stop here
            }
            lastQuery = query; // store for next time
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({address: query}, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    lat.val(results[0].geometry.location.lat());
                    long.val(results[0].geometry.location.lng());
                    lastResult = true; // success!
                } else {
                    alert("Sorry - We couldn't find this location. Please try an alternative");
                    lastResult = false; // failure!
                }
                if (callback) {
                    callback(lastResult); // send the result back
                }
            });
        },
        ctryiso = $("#ctry").val(),
        options = {
            types: ["geocode"]
        };
    if (ctryiso !== '') {
        options.componentRestrictions= { 'country': ctryiso };        
    }
    autocomplete = new google.maps.places.Autocomplete($("#loc")[0], options);
    google.maps.event.addListener(autocomplete, 'place_changed', processLocation);
    $('#search').click(function (e) {
        var form = $(this).closest('form'),
            input = $("#loc"),
            lat = $("#lat"),
            lng = $("#lng");
        e.preventDefault(); // stop the submission
        processLocation(input, lat, lng, function (success) {
            if (success) { // if the geocoding succeeded, submit the form
                form.submit();
            }
        });
    });
    $('#geosearch').click(function (e) {
        var form = $(this).closest('form'),
            input = $("#geoloc"),
            lat = $("#geolat"),
            lng = $("#geolng");
        e.preventDefault(); // stop the submission
        processLocation(input, lat, lng);
    });
});

当单击autosuggestion链接时，它应该对第一个和第二个示例中的结果进行地理编码。但是，当我从下拉菜单中单击自动建议选项时，我在第39行得到以下错误:

未捕获的类型错误:不能调用未定义的方法'val'

有谁能帮我指出我在这里错了吗?

编辑:为了复制，我做了以下操作:

在Chrome中打开javascript控制台
在最上面一行的位置框中输入几个字母
从下拉菜单中点击建议的位置

显然根据我的编辑器第39行这样说:

if (ctryiso !== ") {

google.maps.event.addListener不会将参数传递给您提供的函数(processLocation)，因此您需要为它创建新函数。

process = function () {
    var input = $("#loc"),
        lat = $("#lat"),
        lng = $("#lng");
    processLocation(input, lat, lng, null);
}

并将其命名为

google.maps.event.addListener(autocomplete, 'place_changed', process);

那么它会像这样运行，

http://jsfiddle.net/Jfdbz/6/

更新

这是您要求的更干净的方法。http://jsfiddle.net/Jfdbz/9/

像这样改变processLocation，

processLocation = function (callback) { // accept a callback argument
            var input = $("#loc"),
                lat = $("#lat"),
                long = $("#lng");
            // rest of the cocde ***
}

这一行:

google.maps.event.addListener(autocomplete, 'place_changed', processLocation);

该回调被调用时没有参数，因此input是未定义的，因此您不能在第6行中调用val()。

应该这样做:

google.maps.event.addListener(autocomplete, 'place_changed',function(){
    processLocation(arguments); //With whatever arguments you need
});

在我看来，这个

$('#search').click(function (e) {
    var form = $(this).closest('form'),
        input = $("#loc"),
        lat = $("#lat"),
        lng = $("#lng");
    e.preventDefault(); // stop the submission
    processLocation(input, lat, lng, function (success) {
        if (success) { // if the geocoding succeeded, submit the form
            form.submit();
        }
    });
});

用作用域函数定义了lat、LNG等变量，所以你不能在其他函数中引用它们，比如

 geocoder.geocode({address: query}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                lat.val(results[0].geometry.location.lat());
                long.val(results[0].geometry.location.lng());

尝试在外部定义它们:

 var lastQuery  = null,
    lastResult = null, // new!
    autocomplete,
    lat = null,
    lng = null ...

，然后这样使用:

var form = $(this).closest('form'),
    input = $("#loc"); // !!
// no var here:
    lat = $("#lat");
    lng = $("#lng");