谷歌地图更新jQuery移动问题

Question

我想使用最新版本的JQuery Mobile，但由于Google Maps现在无法使用而出现问题...

使用1.0a2版，谷歌地图可以正常工作，但是现在使用1.3.1版，我有一个空白页！

在我的HTML代码中，我使用的是DIV id =“ map”：div id =“ map” style =“ width：100％; height：78％;”

标头：

最新代码：

链接rel =“ stylesheet” href =“ http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css” />
脚本src =“ http://code.jquery.com/jquery-1.9.1.min.js”>
脚本src =“ http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js”>

旧代码：

链接rel =“ stylesheet” href =“ http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css” />
脚本src =“ http://code.jquery.com/jquery-1.4.4.min.js”>
脚本src =“ http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js”>

有人可以告诉我这是什么问题吗？

谢谢。

Answer 1

您可以通过下载jquery文件并给他静态链接进行尝试，并使用该链接https://developers.google.com/maps/documentation/staticmaps/生成要在div中使用的Google地图代码以及其他有关Google地图的信息。 我找不到上述任何问题。 工作正常，因为我用它。

Answer 2

它对于最新的JQM也很好用。 尝试将此代码作为演示：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Application</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" 
        src="https://maps.googleapis.com/maps/api/js?key=**your key**&sensor=true"></script>
    <script type="text/javascript">
        function initialize() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas, #map-page { height: 100% }
    </style>
    </head>

    <body>

    <div data-role="page" id="map-page" data-url="map-page">

        <div data-role="header">                
            <h1>Header</h1>                
        </div><!-- /header -->

        <div data-role="content" id="map-canvas">
            <p>Page content goes here.</p>
        </div><!-- /content -->

        <div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed">
            <h4>Footer</h4>
        </div><!-- /footer -->

    </div><!-- /page -->

</body>

此处的关键是您应该为data-role="page"提供一个id ，并将其与map div一起设置为height 100% 。 请注意，在我的css

#map-canvas, #map-page { height: 100% }