为什么地图没有显示在移动设备中？答案

【问题标题】：Why Map is not showing in Mobile device?为什么地图没有显示在移动设备中？
【发布时间】：2013-09-29 12:30:13
【问题描述】：

我正在使用 jquery mobile 我的主页

<div data-role="page" id="mapView" data-transition="slide">
        <div data-role="header" data-theme="d" data-position="fixed">
            <h1>
                <a href="" data-theme="b" data-role="button" data-mini="true" onclick="showDirection()">Get Direction</a></h1>
        </div>
         <p id="atmBoothDetails" >
            </p>
        <div data-role="content" id="mapViewContent">


            <div id="map-canvas">
            </div>
        </div>

css

#map-canvas
    {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;

    }

为什么地图没有显示在移动设备中？

【问题讨论】：

以下任何答案是否解决了您的问题？如果是，请检查那个（我相信 Gajotres 提供了一个很好的答案），如果不是，请提供您自己的答案并检查那个。
我忘记接受了。它有效。

标签： android css google-maps jquery-mobile

【解决方案1】：

说明

这还不够。您的 #map-cnvas

将仅覆盖完整大小的内容 div。不幸的是，内容 div (data-role="content") 永远不会覆盖页眉和页脚留下的全部可用高度。

这就是您需要手动调整内容 div 高度的原因。

解决方案 1

CSS：

#content {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

可以在这里找到工作的 jsFiddle 示例：http://jsfiddle.net/Gajotres/7kGdE/

如果没有页眉和页脚，请将顶部和底部替换为 0。

解决方案 2

Javascript

function getRealContentHeight() {
    var header = $.mobile.activePage.find("div[data-role='header']:visible");
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
    var viewport_height = $(window).height();
 
    var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
        content_height -= (content.outerHeight() - content.height());
    } 
    return content_height;
}

这是一个 javascript 解决方案。

这也是一个有效的 jsFiddle 示例：http://jsfiddle.net/Gajotres/xbr2v/

最后的笔记

如果您想了解有关此问题的更多信息，请查看此article，您还将找到几个工作示例。

【讨论】：

【解决方案2】：

这是因为页面将占用尽可能少的空间。您使用 100% 作为宽度和高度，但页面的容器没有实际高度。您必须以编程方式执行此操作。检查$(window).height(); 以获取视口的实际高度并更改#map-canvas 高度。您必须对可能拥有的任何页眉和页脚进行一些调整。

【讨论】：