Javascript 即使在谷歌地图成功加载后,“a为空”
我有一组jQueryUI选项卡,每个选项卡都使用ajax加载project.php。根据传递给脚本的参数,在project.php中使用以下JavaScript显示不同的Google地图:Javascript 即使在谷歌地图成功加载后,“a为空”,javascript,jquery,jquery-ui,google-maps,jquery-tabs,Javascript,Jquery,Jquery Ui,Google Maps,Jquery Tabs,我有一组jQueryUI选项卡,每个选项卡都使用ajax加载project.php。根据传递给脚本的参数,在project.php中使用以下JavaScript显示不同的Google地图: var tab_index = $('#tabs').tabs('option', 'selected'); $('.site_map:visible').css('height','300px'); MapID = $('.site_map:visible').attr('id'); if (MapID
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
此选项卡中生成的映射将加载,但随后给我一个is 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
});
});
看一看。使用方便,功能强大。我自己使用它。结果是我意外地初始化了if内部和外部的映射。你能在JSFIDLE中给出一个工作示例吗?这是什么意思?我也看到了同样的问题。如果您查看第一个代码段,您可以看到我使用新的google.maps.map通过调用MapNewSite函数初始化了map对象一次,然后在不调用任何函数的情况下再次初始化了map对象。这就是错误的原因。