2011-10-25 15 views
0

我有一組jQuery UI選項卡,每個選項卡都使用ajax加載project.php。根據傳遞給腳本的參數,不同的谷歌地圖是使用下面的JavaScript內project.php顯示:即使在Google地圖加載成功後,「a爲null」

var tab_index = $('#tabs').tabs('option', 'selected'); 
$('.site_map:visible').css('height','300px'); 

MapID = $('.site_map:visible').attr('id'); 

if (MapID !== 'map-new'){ 
    var map_id = 'map-'+tab_index; 
    $('.site_map:visible').attr('id', map_id); 
} else { 
    MapNewSite(); 
} 

var latlng = new google.maps.LatLng(19,-70.4); 
var myOptions = { 
    zoom: 8, 
    center: latlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

arrMaps[tab_index] = new google.maps.Map(document.getElementById("map-" + tab_index), myOptions); 
arrInfoWindows[tab_index] = new google.maps.InfoWindow(); 
placeMarker($('.site_details:visible .inpLat').val(), $('.site_details:visible .inpLng').val(), tab_index); 

function MapNewSite(){ 
    arrMaps[tab_index] = new google.maps.Map(document.getElementById("map-new"), myOptions); 
    placeMarker(19,-70.4,tab_index); 
    arrInfoWindows[tab_index] = new google.maps.InfoWindow(); 
} 

每個使用沒有任何問題,我的數據庫負載的查詢返回的參數加載地圖。然而,在最後一個例子中,我在沒有任何參數的情況下加載了project.php文件,以便讓用戶可以操作一個空白標籤。不使用數據庫座標加載地圖的信號是其div的id是「map-new」。

該選項卡中生成的地圖會加載,但會給我提供「a爲null」的錯誤,這通常意味着它無法找到指定用於初始化地圖的ID的div。甚至在地圖加載之後導致這個錯誤的原因是什麼?如何阻止錯誤發生?

這裏是JavaScript中包含的標籤網站父頁面:

var arrMaps = {}; 
    var arrInfoWindows = {}; 
    var arrMarkers = {}; 

    function placeMarker(lat, lng, tab_index){ 
     map = arrMaps[tab_index]; 
     var bounds = new google.maps.LatLngBounds(); 
     var latlng = new google.maps.LatLng(
      parseFloat(lat), 
      parseFloat(lng) 
     ); 

     bounds.extend(latlng); 
     createMarker(latlng, tab_index); 
     map.fitBounds(bounds); 

     zoomChangeBoundsListener = 
      google.maps.event.addListener(map, 'bounds_changed', function(event) { 
       if (this.getZoom()){ 
        this.setZoom(10); 
       } 
      google.maps.event.removeListener(zoomChangeBoundsListener); 
     }); 
    } 

    function createMarker(latlng, tab_index) { 
     var html = '<a href="#" target="_blank" onclick="OpenMapDialog();return false;">Click here to move marker</a>'; 
     arrMarkers[tab_index] = new google.maps.Marker({ 
      map: arrMaps[tab_index], 
      position: latlng 
     }); 

     arrInfoWindows[tab_index] = new google.maps.InfoWindow(); 

     google.maps.event.addListener(arrMarkers[tab_index], 'click', function() { 
      arrInfoWindows[tab_index].setContent(html); 
      arrInfoWindows[tab_index].open(arrMaps[tab_index], arrMarkers[tab_index]); 
     }); 
    } 

    $(function() { 
     $("#tabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "Couldn't load this tab. We'll try to fix this as soon as possible. " + 
         "If this wouldn't be a demo."); 
       } 
      }, 
      cache: true 
     }); 
    }); 
+0

你可以把一個工作的例子在jsfiddle嗎? –

回答

0

事實證明,我是在if及其外部意外初始化映射。

+0

這是什麼意思?我看到了同樣的問題。 –

+0

如果你看看第一個代碼片段,你可以看到我通過調用MapNewSite()函數初始化地圖對象(使用'new google.maps.Map'),然後再次調用,而不用調用任何函數。這是錯誤的原因。 – Keyslinger

相關問題