谷歌地图更新jquery移动问题

Posted

技术标签:

【中文标题】谷歌地图更新jquery移动问题【英文标题】:Google maps update jquery mobile problems 【发布时间】:2013-05-15 21:41:58 【问题描述】:

我想使用最新版本的 JQuery Mobile,但我遇到了问题,因为 Google 地图现在无法使用...

使用 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">

谁能告诉我是什么问题?

谢谢。

【问题讨论】:

【参考方案1】:

您可以通过下载jquery文件并给他静态链接来尝试, 使用此链接https://developers.google.com/maps/documentation/staticmaps/ 生成您的谷歌地图代码以在 div 中使用以及有关谷歌地图的其他信息。 我找不到上面这个有任何问题。我使用它时工作正常。

【讨论】:

【参考方案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% 

【讨论】:

嗨,我在单页 JQM 应用程序中遇到问题:***.com/q/23315404/1480877 知道为什么吗?谢谢

以上是关于谷歌地图更新jquery移动问题的主要内容,如果未能解决你的问题,请参考以下文章

谷歌地图 api 长时间加载的 jQuery 移动对话框消失

谷歌地图没有在我的 jQuery 移动弹出窗口上绘制? [复制]

移动谷歌地图标记点时用纬度和经度更新数据库

谷歌地图方向服务地理定位和地址输入jquery mobile

移动地图时,在谷歌地图中更新Ajax Json数组中的标记

从谷歌地图上的 JSON 更新标记