未定义函数

Question

我的jquery脚本出现函数未定义错误，但我不确定原因。

JQuery代码：http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkwIaCdNkPHL5gNg“type="text/javascript">

<script type="text/javascript">
$(document).ready(function(){
var dealerName = $('.name', '.adr').text();
var customerName = dealerName.slice(0, - 1);
var customerAddress = $('.street', '.adr').text() + ', ' + $('.locality', '.adr').text() + ', ' + $('.state', '.adr').text() + ', ' + $('.zipCode', '.adr').text();
$("#nameAddress .placeholderName").html(customerName);
$("#nameAddress .placeholderAddress").html(customerAddress);

        var error_address_empty     = 'Please enter a valid address first.';
        var error_invalid_address   = 'This address is invalid. Make sure to enter your street number and city as well?'; 
        var error_google_error      = 'There was a problem processing your request, please try again.';
        var error_no_map_info       = 'Sorry! Map information is not available for this address.';


        var default_address = customerAddress;

        var current_address = null;
        var map               = null;
        var geocoder          = null;
        var gdir                  = null;
        var map_compatible  = false;

        if( GBrowserIsCompatible() ) {
            map_compatible = true;
        }

        function initialize_map() {
            if( map_compatible ) {
                map         = new GMap2(document.getElementById('map_canvas'));        
                geocoder = new GClientGeocoder();
                show_address(default_address);

                map.addControl(new GSmallMapControl());

                map.addControl(new GMapTypeControl());              
            }
        }

        function show_address(address) {
            if( map_compatible && geocoder ) {
                current_address = address;      
                geocoder.getLatLng(
                address,
                function( point ) {
                    if( !point ) {
                        alert(error_no_map_info);
                    } else {
                        map.setCenter(point, 13);
                        var marker = new GMarker(point);
                        map.addOverlay(marker);
                        marker.openInfoWindowHtml("<span style='font-size:14px; font-weight:bold;'>" + customerName + "<br /></span><span style='font-size:12px;'>" + address + "</span>");
                    }
                }
                );
            }
            return false;
        }

        function get_directions() {
            if( map_compatible ) {
                if( document.direction_form.from_address.value == '' ) {
                    alert(error_address_empty);
                    return false;
                }

                document.getElementById('directions').innerHTML = '';

                gdir = new GDirections(map, document.getElementById('directions'));

                GEvent.addListener(gdir, 'error', handleErrors);

                set_directions(document.direction_form.from_address.value, current_address);            
            }
            return false;
        }

        function set_directions(fromAddress, toAddress) {
        gdir.load("from: " + fromAddress + " to: " + toAddress,
                    { "locale": "en" });
        }

        function handleErrors(){
            if( gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS )
                alert(error_invalid_address);
            else if( gdir.getStatus().code == G_GEO_SERVER_ERROR )
                alert(error_google_error);
            else if( gdir.getStatus().code == G_GEO_MISSING_QUERY )
                alert(error_address_empty);
            else 
                alert(error_invalid_address);
        }
$(window).load(initialize_map);
});
</script>

HTML页面中的代码：

<div id="main-map-wrapper">
    <div id="seperator"></div>
    <table width="100%" height="94">
        <tr valign="top">
            <td width="33%" colspan="3">
                <div id="headertextdiv">
                    <div id="nameAddress">
                        <span class="placeholderName" style="font-size:20px; font-weight:bold; line-height:22px;">&nbsp;&nbsp;</span>
                        <br />
                        <span class="placeholderAddress" style="font-size:14px; font-weight:bold; line-height:22px;">&nbsp;&nbsp;</span>
                        <br />
                        <input type="submit" onClick="return show_address('5930 West Plano Pkwy, Plano, Texas, 75093');" value="Center Map on Dealership">
                    </div>
                </div>
            </td>
        </tr>
    </table>
    <div id="map_canvas">&nbsp;&nbsp;</div>
    <form name="direction_form" onSubmit="get_directions(); return false;" class="form">
        <span style="font-size:18px; font-weight:bold;">Need directions?</span>
        <br />
        <span style="font-size:14px; margin-top:7px;">Enter your address below to get turn-by-turn directions:</span>
        <br />
        <input type="text" name="from_address" class="form-field" />
        <input type="submit" value="Get Directions" class="form-submit" style="margin-left:10px;" />
    </form>
    <a name="directions_table">&nbsp;&nbsp;</a>
    <div id="directions">&nbsp;&nbsp;</div>
</div>
<div class="footer-fix">&nbsp;&nbsp;</div>

​

问题:无论如何，正如您在代码中看到的那样，我首先设置了所有变量(包括本例中最重要的customerName和customerAddress )。然后我有四个函数，在脚本的末尾我初始化了map。除了html页面上的两件事之外，所有的东西都能正常工作。有一个"onClick“使地图居中不起作用，表单提交也不起作用。

我相信这是因为我在ready处理程序中设置了函数。有人告诉我，我需要在该处理程序中将函数绑定到它们的事件，就像对initialize_map所做的那样。我试过这样做，但我尝试的所有东西都不起作用。附注和有用的提示可能是:当我调用initialize_map时，show_address会立即运行以启动地图；然而，当您单击按钮“在经销商上居中地图”时，它也应该被调用。只有在提交表单时才会调用get_directions。

到目前为止，当页面加载时，一切都会显示出来；然而，当我点击“经销商中心地图”或提交表单时，我得到一个javascript错误，告诉我函数没有定义。

我对此停滞不前。不确定如何让它正常工作。任何帮助都是非常感谢的。谢谢!

Answer 1

这是因为您的show_address和get_directions仅在document.ready处理程序的作用域内定义，如果您希望通过内联脚本调用这些函数，则需要将它们移到该作用域之外。