Javascript - 函数在 jQuery(document).ready 中不起作用（谷歌地图地理编码）

Question

我有一个小的谷歌地图脚本可以从 Lat Lon 对或 address 获取位置，还可以更新那些 lat、lon 和地址输入字段..

在此处查看jsfiddle

单击“绘制”按钮时 - 应该调用一个名为 codeAddress() 的函数。 但在萤火虫控制台上我得到：

Error: ReferenceError: codeAddress is not defined

我不明白为什么没有定义codeAddress() ...

奇怪的是，如果我将函数移到

jQuery(document).ready(function(){} 确实有效（请参阅jsFIDDLE）

（我还需要移动var marker - 否则它只会使地图居中，并给出marker is undefined 错误；

所以我的问题很简单，我做错了什么？ 为什么相同的功能在 jQuery(document).ready(function(){} 之外有效，但在内部无效？

还有一个辅助问题：当标记被拖动时，我如何更新地址输入字段（如 lon lat 输入..）???

更新 - 感谢大家 - 学到了另一件重要的事情。不幸的是 - 所有都是有效的答案和解决方案 - 但我只能接受一个，对我来说，最容易理解的解决方案（对 JS 非常不熟悉 - 尽管它可能不是完美的做法）是 @cowls 再次感谢大家。 .

Answer 1

简单的解决方法是替换

function codeAddress() { ... }

与

codeAddress = function() { ... }

您的问题是您将 codeAddress 声明为一个变量，其范围对于您绑定到文档就绪处理程序的函数是本地的。因此，该函数一退出，codeAddress 就不再存在。第二个声明（注意缺少的“var”）将 codeAddress 声明为全局变量，因此在准备函数退出后仍可访问。

Answer 2

您应该为 document.ready 方法内的所需元素分配一个点击处理程序，而不是使用 onclick。

例如

$(input).click(function() { codeAddress() });

会将代码地址函数分配给所有输入框的点击事件，显然您希望将其定位在特定的类或 ids

这是最好的做法，而不是使用 onclick。

Answer 3

单击按钮时，会在全局范围内查找 codeAddress()，但您已在 $(document).ready() 中定义它。

在$(document).ready() 之外声明函数可能是这里最好的方法，只有你只会从就绪处理程序内部调用的函数才应该在内部定义；这样做也会让你准备好的处理程序更干净。

要在标记被拖动到某个位置时找到该位置，您需要使用GeoCoder 服务器将其映射到文本位置：

var geocoder = new google.maps.Geocoder();

google.maps.event.addListener(marker, 'dragend', function(evt) {
    geocoder.geocode({latLng: evt.latLng}, function(results, status) {
        if (status==google.maps.GeocoderStatus.OK && results.length) {
            // do something with results[0..x].formatted_address
        }
    })
});