Jquery移动刷新加载地图API v3

jquery mobile refresh to load map api v3

本文关键字：API v3 地图 加载 移动 刷新 Jquery      更新时间：2023-09-26

我必须刷新一次页面才能加载地图。你可以看看下面的链接:

http://metartestmobile.netau.net/template/listview.html

当我移动这一行(<script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>)

但是我想用那一行…

这是listview.html文件

<html>
        <head>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <link rel="stylesheet" href="themes/Bootstrap.css">
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
            <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
            <script src="http://code.jquery.com/jquery-1.11.0-beta2.js"></script>
            <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        </head>
        <body>
            <div data-role="page" id="my-page" >
                <div data-role="content" data-theme="a">
                    <ul data-role="listview" data-inset="true" data-divider-theme="f">
                        <li data-role="list-divider">Weather</li>
                        <li data-icon="arrow-r"><a href="map.html" data-transition="flip" >Humidity-Rain</a></li>
                    </ul>
                </div>
            </div>
        </body>
    </html>

和map.html 

<html>
<head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <link rel="stylesheet" href="themes/Bootstrap.css">
<script type="text/javascript">
  var infowindow;
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(38.822590,24.653320);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    }
</script>
</head>
<body onload="initialize()">
    <div data-role="content">
        <div id="map_canvas" ></div>    
    </div>
</body>
</html>

jquery移动端默认使用ajax加载页面。所以改变这个

a href="map.html" data-transition="flip"

a href="map.html" data-transition="flip" rel="external"

则jquery手机刷新孔页面。

相关文章：