jquery mobile refresh加载map api v3

时间:2014-05-07 19:11:27

标签: javascript jquery google-maps jquery-mobile google-maps-api-3

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

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>

1 个答案:

答案 0 :(得分:0)

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

a href =&#34; map.html&#34;数据 - 过渡=&#34;翻转&#34;

a href =&#34; map.html&#34;数据 - 过渡=&#34;翻转&#34;的rel =&#34;外部&#34;

然后是jquery移动刷新孔页。