我已经做了一段时间了,但仍然没有回应。。
我想做的是加载一个带有ajax的谷歌地图,没有刷新菜单。这是加载所有菜单页面的主页,我将调用main.php:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<ul id="nav">
<li><a href="page_main">Main</a></li>
<li><a href="page_weather">Weather</a></li>
</ul>
<div id="content"></div>
<script>
$(document).ready(function(){
//initial
$('#content').load('menu/page_main.php');
//handle menu clicks
$('ul#nav li a').click(function() {
var page = $(this).attr('href');
$('#content').load('menu/' + page + '.php');
return false;
});
});
</script>
这是带有地图的页面,让我们调用page_weather.php:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-15.869167, -47.920834),
zoom: 3,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<h1>Principal</h1>
</br>
</br>
<body onLoad="initialize()">
<div id="map_canvas" style="width:800; height:400;"></div>
当page_weather.php直接在浏览器中加载时,地图会正确加载,但当使用ajax无刷新菜单加载页面时,我只得到一个800x400的白框。
我该怎么解决这个问题?
已试用:
正在执行<脚本>内部<div>AJAX 检索
可以用innerHTML插入脚本吗?
jQuery.load()
为您执行<script>
标记。您的问题在于使用window.load
事件初始化google地图。如果在初始窗口加载后将此脚本注入文档,则永远不会触发此事件。
如果谷歌地图没有像大多数库一样坚持window.load
事件,而不是dom就绪事件,我会有一个更好的解决方案。但是,由于initialize()
函数是一个全局函数,您应该能够简单地将load
调用更改为:
$('#content').load('menu/page_main.php', function () {
initialize();
});
顺便说一下,卸下onLoad="initialize()"
。google.maps.event.addDomListener(window, 'load', initialize);
行已经设置了window.load
事件。
事件是在函数之前生成的,它无法识别,您可以放入以下代码:
$(window).load(function(){
google.maps.event.addDomListener(window, 'load', initialize);
});