jQuery 手机和 Google 地图

Question

我在使用 jQuery 手机和 Google 地图时遇到问题。我必须使用 jQuery Mobile 创建一个移动应用程序。我的问题是我无法在内容中显示地图，我只能看到灰色 space，而 Safari 和 Chrome 等浏览器看不到任何类型的错误或警告。 Firefox 的控制台反而会看到很多警告，例如 "unknown property "-moz-border-radius-topleft” Declaration Dropped。”，"Error in parsing value for background-image. Declaration Dropped."

我在没有 jQuery移动设备的情况下加载了代码，就像我在普通网页上所做的那样，并且成功了。

编辑：我能看到什么，要查看控制台显示的内容，您可以在这里查看：

http://riccardocelli.altervista.org/temporaneo.php

我尝试更改 jQuery 和 jQueryMobile 的版本，但它不起作用..

$(document).on("pagecreate", "#pagemap", function () {
//here the google map is created and loaded 
...
...
Options = {
            enableHighAccuracy: true,
            timeout: 10000,
            maximumAge: 0,
            zoom:20
        };

...
            map = new google.maps.Map(document.getElementById("map_container"), Options);
...

<div data-role="page" id="pagemap" data-title="home">

    <div data-role="header" data-position="fixed" data-tap-toggle="false">
    <div id="top">
        <a id="top1" href="index.php" data-role="button" data-icon="home" data-iconpos="notext">Home</a>
        <a id="top2" href="#search" data-role="button" data-icon="search" data-iconpos="notext">Search</a>
        </div>
    </div>

    <div role="main" class="ui-content" id="map_container">

    </div>

    <div data-role="footer" data-position="fixed" data-tap-toggle="false">
        <div id="bottom">
            <a id="bottom1" href="#friends" data-role="button" data-icon="star" data-iconpos="notext">Home</a>
            <a id="bottom2" href="Settings.php" data-role="button" data-icon="gear" data-iconpos="notext">Search</a>
        </div>
    </div>
</div>

谁能帮帮我？所有错误都在文件中：http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css .

谢谢！

Answer 1

尝试给 google 地图一个起点：

var myOptions = {
  enableHighAccuracy: true,
  zoom: 6,
  center: new google.maps.LatLng(36.231719,-113.030911),
};
map = new google.maps.Map($('#map_container')[0], myOptions);

还在 jQM 内容 div 中为您的地图容器添加一个 div 并设置它的高度。

DEMO

如果您希望地图填充页眉和页脚之间的可用设备高度，您可以根据此答案缩放内容DIV：set content height 100% jquery mobile

jQuery 手机和 Google 地图

jQuery Mobile and Google Maps

html

javascript

google-maps

jquery-mobile

DEMO

DEMO2