2011-06-01 81 views
0

我正在使用谷歌地圖插件,我希望它在頁面加載以及所有回傳中顯示。它似乎只適用於回發。有任何想法嗎?我將body的onload標籤設置爲「body background =」#ccccff「onload =」initialize()「」,但該函數並沒有在第一次定義。爲什麼?下面是代碼:Javascript函數在回發頁面上工作,但不能頁面加載

<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); 
    }); 
} 

+0

嘗試用調試器逐步執行代碼。轉到youtube.com並搜索「使用chrome調試javascript」。現在您可以逐行瀏覽您的代碼並查看它失敗的位置。 – mrtsherman 2011-06-01 21:45:48

回答

0

很可能與onload功能的計時問題被稱爲前的初始化功能已準備就緒。這就是像jQuery這樣的庫有一個document.ready函數的原因。您可以嘗試刪除onload,並在您的HTML底部撥打initialize(),即在關閉body標記之前。這可能適合你。

如果您有選擇,我會使用一個庫,以便您可以確保該功能在那裏,並且您的頁面已準備就緒。如果你還沒有嘗試過,請給jQuery一槍。

相關問題