1

好吧,我已经为此工作了一段时间,但我仍然没有回应..

我想要做的是加载一个带有 ajax 没有刷新菜单的 googlemap。所以这里是加载所有菜单页面的主页,我将调用 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 的白框。

我该如何解决这个问题?

已经尝试过:

在 AJAX 检索的 <div> 中执行 <script>

可以用 innerHTML 插入脚本吗?

4

2 回答 2

0

jQuery 实际上会<script>通过jQuery.load(). 您的问题在于您正在使用该window.load事件来初始化谷歌地图。如果在初始窗口加载后将此脚本注入文档,则永远不会触发此事件。

如果谷歌地图不坚持一个window.load事件而不是像大多数图书馆那样的 dom 就绪事件,我会有一个更好的解决方法。但是由于您的initialize()函数是一个全局函数,您应该能够简单地将您的load调用更改为:

$('#content').load('menu/page_main.php', function () {
    initialize();
});

顺便说一句,删除onLoad="initialize()". 您已经拥有window.loadgoogle.maps.event.addDomListener(window, 'load', initialize);线路设置的事件。

于 2013-07-27T19:08:49.500 回答
0

该事件是在函数之前生成的,它无法识别,您输入以下代码:

$(window).load(function(){
google.maps.event.addDomListener(window, 'load', initialize); 

});
于 2014-02-07T13:09:48.300 回答