Javascript function 适用于回发但不适用于页面加载

Question

我正在使用谷歌地图插件，我希望它显示在页面加载以及所有回发中。 不过，它似乎只适用于回发。 有任何想法吗？ 我将正文 onload 标记为“body background="#ccccff" onload="initialize()"”，但第一次没有定义 function。 为什么？ 这是代码：

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">      </script>
<script type="text/javascript">
var mostRecentInfo;
function initialize() {
    var center = new google.maps.LatLng(0, 0);
    var mapOptions = {
        center: center,
        zoom:1,
        mapTypeId: google.maps.MapTypeId.SATELLITE
    };

    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var posStr = <%=JSON%>;
    if (posStr.toString() != "0") {
        var test = posStr.toString().split(',');            
        var groundstation = <%=groundStation%>;
        var dateTimeStr = <%=datetimesStr%>;
        var AUStr = <%=auStr%>;
        var spaceCraft = <%=spacecraft%>;
        var dateTimes = dateTimeStr.toString().split(',');
        var auIDs = AUStr.toString().split(',');
        var latitude = new Array((test.length / 2));
        var longitude = new Array(latitude.length);
        var i = 0;
        var markerArray = new Array();
        for (var j = 0; j < (test.length - 1); j = j + 2) {
            latitude[i] = eval(test[j+1]);
            longitude[i] = eval(test[j]);
            var position = new google.maps.LatLng(latitude[i], longitude[i]);
            var marker = new google.maps.Marker({
                map:map,
                position:position
            });
            markerArray.push(marker);
            i++;
        }
        var sumLat = 0;
        var sumLong = 0;            
        for (i = 0; i < latitude.length; i++) {
            sumLat += latitude[i];
            sumLong += longitude[i];
        }
        var avgLat = sumLat / latitude.length;
        var avgLong = sumLong / longitude.length;
        center = new google.maps.LatLng(avgLat, avgLong);
        map.panTo(center); 
        var circle; 
        var contentStr = new Array();                       
        for (i = 0; i < markerArray.length; i++) {
            position = markerArray[i].getPosition();
            var circOptions = {
                strokeColor:"#770000",
                strokeOpacity:0.1,
                fillColor:"#881111",
                fillOpacity:0.4,
                map:map,
                center:position,
                radius:2500000
            };
            circle = new google.maps.Circle(circOptions);
            marker = markerArray[i];
            contentStr[i] = '<div id="content">' +
                '<b>Spacecraft: </b>' + spaceCraft.toString() + '<br />' +
                '<b>Start Time (UTC): </b>' + dateTimes[i].toString() + '<br />' +                  
                '<b>Position: </b>(' + latitude[i].toString() + ', ' + longitude[i].toString() + ')<br />' +
                '<b>AU ID: </b>' + auIDs[i] + '<br />' +
                '<b>Downlink Station: </b>' + groundstation.toString() + '<br />' +
                '</div>';
            addListener(map, marker, contentStr[i]);
        }
    }         
}

function addListener(map, marker, content) {
    var infowindow = new google.maps.InfoWindow({
        content:content
        });               
    google.maps.event.addListener(marker, 'mouseover', function() {
        if (mostRecentInfo) 
            mostRecentInfo.close();
        mostRecentInfo = infowindow;
        infowindow.open(map, this);
    });
}

等等

Answer 1

在初始化 function 准备好之前onload加载 function 可能是时序问题。 这就是像 jQuery 这样的库有一个 document.ready function 的原因。 您可以尝试删除onload并在 HTML 的底部调用initialize() ，就在结束body标记之前。 这可能对你有用。

如果您可以选择，我会使用一个库，这样您就可以确保 function 在那里并且您的页面已准备好。 如果您还没有尝试过，请试一试 jQuery 。