Javascript JQuery-将Google地图放置在“；内容“；isn'；看不见？_Javascript_Jquery_Css_Jquery Mobile_Google Maps Api 3

Javascript JQuery-将Google地图放置在“；内容“；isn'；看不见？

javascript jquery css jquery-mobile google-maps-api-3

Javascript JQuery-将Google地图放置在“；内容“；isn'；看不见？,javascript,jquery,css,jquery-mobile,google-maps-api-3,Javascript,Jquery,Css,Jquery Mobile,Google Maps Api 3,在使用Google Maps v3和JQuery时，将地图放置在data role=“content”中有点困难。控制台中没有显示错误，因此我在调试时遇到了困难。屏幕上没有显示地图以下是我的两个文件： index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-sc

在使用Google Maps v3和JQuery时，将地图放置在data role=“content”中有点困难。控制台中没有显示错误，因此我在调试时遇到了困难。屏幕上没有显示地图

以下是我的两个文件：

index.html

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, width=device-width, user-scalable=no" />
        <link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="https://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?&sensor=true"></script>
        <script type="text/javascript" src="js/mapload.js"></script>
</head>
<body>
    <div data-role="page" id="map">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <div id="map-canvas"></div>
        </div>
    </div>
</body>
</html>

给了我一些见解，但没有完全回答我的问题

编辑：解决方案

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key={REPLACE THE BRACKETS AND THIS TEXT WITH YOUR API KEY}&sensor=true"></script>    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
</head>
<body>
<script type="text/javascript">
    $(document).on('pageinit', '#index',function(e,data){    
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
            center: new google.maps.LatLng(11.618044,-34.823347),
            zoom: 15,
            disableDefaultUI: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    });
    </script>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content" id="content" style="padding:0;position:absolute;top:40px;right:0;bottom:40px;left:0;">
            <div id="map_canvas" style="height:100%"></div>
        </div>

        <div data-theme="a" data-role="footer" data-position="fixed">
            <h3>
                First Page
            </h3>
        </div>
    </div>
</body>
</html>


jQM复杂演示
$（document）.on（'pageinit'，'#index'，函数（e，data）{
var map=new google.maps.map（document.getElementById（'map_canvas'）{
中心：新google.maps.LatLng（11.618044，-34.823347），
缩放：15，
disableDefaultUI:true，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
});
首页
首页

在html末尾加载mapload.js

<div data-role="page" id="map">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <div id="map-canvas"></div>
        </div>
    </div>
<script type="text/javascript" src="js/mapload.js"></script>

在html的末尾加载mapload.js

<div data-role="page" id="map">
        <div data-role="header">
            <h1>Header</h1>
        </div>
        <div data-role="content">
            <div id="map-canvas"></div>
        </div>
    </div>
<script type="text/javascript" src="js/mapload.js"></script>

`只有一种方法可以将谷歌地图与jQuery Mobile一起使用。因为jQuery Mobile是特定的，所以无法使用窗口加载来初始化地图

要成功初始化地图，需要特别正确的高度，并且只能在jQuery Mobile

页面显示

页面事件期间执行。如果您想了解更多关于jQuery移动页面事件的信息，以及为什么pageshow
事件对于插件初始化很重要，请查看我的私人博客。或者您可以找到它

让我把这个故事讲得简短一点，下面是一个有效的例子：

下面是使用的javascript和CSS：

Javascript CSS

只有一种方法可以将Google地图与jQuery Mobile一起使用。因为jQuery Mobile是特定的，所以无法使用窗口加载来初始化地图

要成功初始化地图，需要特别正确的高度，并且只能在jQuery Mobile

页面显示

让我把这个故事讲得简短一点，下面是一个有效的例子：

下面是使用的javascript和CSS：

Javascript CSS

这是一个错误。另一个是确保你的地图画布css是正确的。。检查主体，看看地图画布中是否有任何实际内容，他们可以找出如何在网页中使用最佳CSS。这应该可以很好地解决这一错误。另一个是确保你的地图画布css是正确的。。检查主体，看看地图画布中是否有任何实际内容，他们可以找出如何在网页中使用最佳CSS。那就行了

#map-canvas {
  width: 480px;
  height: 640px;
}

$(document).on('pageinit', '#index',function(e,data){    
    var map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: new google.maps.LatLng(42.618044,-87.823347),
        zoom: 15,
        disableDefaultUI: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
});

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