Question

我将下面的脚本放在页面的HEAD中。页面加载时应该初始化地图。这个难题有两个部分，一个是document.ready中的脚本，它设置所有变量并配置我想要放在页面上的地图。第二部分是启动地图的window.onload=initialize_map;。

我相信一切都正常运行，但是，我不确定。我所知道的是，initialize_map函数永远不会运行。我甚至尝试在initialize_map();的按钮上设置onclick来尝试手动启动地图，它仍然无法正常工作。我的代码有问题吗？非常感谢任何帮助。

谢谢！

问题代码：

    <script src= "http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhTrgZ5jvdqcEQouEpPcZ_hS81NmJwGXlxuJr8lEEo4Njw3WRVhT8auzZb55JSMDkwIaCdNkPHL5gNg" type="text/javascript"> </script>

<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.onload=initialize_map;
</script>

Answer 1

函数的整个主体位于if语句中，该语句取决于布尔变量map_compatible为true。你确定它是真的吗？

尝试在if语句之前发出警报，看看它是否以这种方式运行。也许打印出map_compatible的值。

如果不是这样，那么你可以使用像firebug这样的工具来逐步浏览你的javascript，看看它为什么没有像你期望的那样设置为true。

Answer 2

立即跳出两个问题：

initialize_map不在全局范围内（它是在匿名ready事件处理程序中定义的），因此您可能会为window.onload分配一个未定义的值，因为您已经放置了赋值本身在该功能之外（在全球范围内）。
为什么要将jQuery的ready处理程序与window.onload混合使用？在最坏的情况下，这是完全没有用的 - from the jQuery documentation：

.ready（）方法通常与属性不兼容。如果必须使用load，则不要使用.ready（）或使用jQuery的.load（）方法将加载事件处理程序附加到窗口或更具体的项目，如图像。

......即使充其量，也没有必要。两者都使用jQuery：
```
$(document).ready(function(){

  ...

  $(window).load(initialize_map);

  ...

});
```

javascript函数没有运行

2 个答案: