jQuery mobile Google地图无法正确加载

Question

我正在开发jQuery移动应用程序。 在这个应用程序中，我添加了带有自定义标记的google map。 因此，问题在于，如果我导航到带有地图的页面，则只会加载该地图的一小部分，但是如果我重新加载页面，则它可以正常工作。 这是我的标头代码，仅用于查看我使用的脚本：

<header>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</header>

这是页面内容代码

<div data-role="content">
    <div id="map_canvas" style="height: 300px; width: 100%;"></div>
 <script>  
var mapOptions = {zoom: 14, center: new google.maps.LatLng(47.790072,9.874862), mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var myMarker1 = new google.maps.Marker({position: new google.maps.LatLng(47.788594,9.882091), map: map, icon: 'icons2.png' })
;
var myMarker2 = new google.maps.Marker({position: new google.maps.LatLng(47.786259,9.880954), map: map, icon: 'icons3.png' });
var myMarker3 = new google.maps.Marker({position: new google.maps.LatLng(47.790072,9.874862), map: map, icon: 'icons4.png' });
var myMarker4 = new google.maps.Marker({position: new google.maps.LatLng(47.795856,9.863297), map: map, icon: 'icons5.png' });


</script>

</div>

Answer 1

我已添加了请求的打开信息窗口。 请检查以下代码：

<!doctype html>
  <html lang="en">
   <head>
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
    <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
    <script type="text/javascript">

        var chicago = new google.maps.LatLng(41.850033,-87.6500523),
        mobileDemo = { 'center': '41,-87', 'zoom': 7 };

        function initialize() {
            $('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
        }

        $(document).on("pageinit", "#basic-map", function() {
            initialize();
        });

        $(document).on('click', '.add-markers', function(e) {
            e.preventDefault();
            $('#map_canvas').gmap('addMarker', { 'position': chicago } ).click(function() {
                $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
            });
        });
    </script>
</head>
<body>
    <div id="basic-map" data-role="page">
        <div data-role="header">
            <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
            <a data-rel="back">Back</a>
        </div>
        <div data-role="content">   
            <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:350px;"></div>
            </div>
            <a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
        </div>
    </div>      
</body>

没有jQuery-ui-maps插件的示例：

  <!doctype html>
  <html lang="en">
  <head>
    <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
    <script type="text/javascript">

        var cityList = [
            ['Chicago', 41.850033, -87.6500523, 1],
            ['Illinois', 40.797177,-89.406738, 2]
        ],
        demoCenter = new google.maps.LatLng(41,-87),
        map;

        function initialize()
        {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 7,
               center: demoCenter,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });
        }

        function addMarkers()
        {
            var marker, 
            i,
            infowindow = new google.maps.InfoWindow();

            for (i = 0; i < cityList.length; i++) 
            {  
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
                    map: map,
                    title: cityList[i][0]
                });

                google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(cityList[i][0]);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
            }
        }
        $(document).on("pageinit", "#basic-map", function() {
            initialize();
        });

        $(document).on('click', '.add-markers', function(e) {
            e.preventDefault();
            addMarkers();
        });

    </script>
</head>
<body>
    <div id="basic-map" data-role="page">
        <div data-role="header">
            <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
            <a data-rel="back">Back</a>
        </div>
        <div data-role="content">   
            <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:350px;"></div>
            </div>
            <a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
        </div>
    </div>      
</body>