Javascript Jquery移动对话框不显示页面_Javascript_Jquery Mobile_Google Maps Api 3

Javascript Jquery移动对话框不显示页面

javascript jquery-mobile google-maps-api-3

Javascript Jquery移动对话框不显示页面,javascript,jquery-mobile,google-maps-api-3,Javascript,Jquery Mobile,Google Maps Api 3,我从GoogleMapsJavaScriptAPIv3站点获取了基本地图演示，并将其放在一个名为“testnav.htm”的页面中。我试图使用JQM以对话框的形式打开此页面，但该对话框无法正确显示。我得到的只是对话框标题。我的testnav.htm如下所示： <!DOCTYPE html> <html> <head> <title>Simple Map</title> <meta name="viewport

我从GoogleMapsJavaScriptAPIv3站点获取了基本地图演示，并将其放在一个名为“testnav.htm”的页面中。我试图使用JQM以对话框的形式打开此页面，但该对话框无法正确显示。我得到的只是对话框标题。我的testnav.htm如下所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 200px;
        width: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
        }
        console.log('here');
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div data-role="dialog">
        <div data-role="header" data-theme="d">
            <h1>Map</h1>
        </div>
        <div data-role="content" data-theme="c">
            <div id="map-canvas"></div>          
        </div>

    </div>
  </body>
</html>

<a href="testnav.htm" data-rel="dialog">View On Map</a>


简单地图
html，正文，#地图画布{
保证金：0；
填充：0；
高度：200px；
宽度：400px；
}
var映射；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
}
console.log（'here'）；
google.maps.event.addDomListener（窗口“加载”，初始化）；
地图

我这样称呼它：

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 200px;
        width: 400px;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map-canvas'),
                mapOptions);
        }
        console.log('here');
        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div data-role="dialog">
        <div data-role="header" data-theme="d">
            <h1>Map</h1>
        </div>
        <div data-role="content" data-theme="c">
            <div id="map-canvas"></div>          
        </div>

    </div>
  </body>
</html>

<a href="testnav.htm" data-rel="dialog">View On Map</a>

为什么地图画布不显示

更新按照Omar的建议，这是我现在运行的代码

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">

  </head>
  <body>
      <div data-role="dialog">
          <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
            <script>
                $(document).on('pageshow', '[data-role=dialog]', function () {;
                    var map;
                    var mapOptions = {
                        zoom: 8,
                        center: new google.maps.LatLng(-34.397, 150.644),
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'),
                        mapOptions);
                    console.log('end');
                });

            </script>
        <div data-role="header" data-theme="d">
            <h1>Map</h1>
        </div>
        <div data-role="content" data-theme="c">       
            <div id="map-canvas" ></div>          
        </div>   
    </div>
  </body>


简单地图
$（文档）。在（'pageshow'，'data role=dialog]'上，函数（）{；
var映射；
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map-canvas'），
地图选项）；
console.log（'end'）；
});
地图

但是我不确定在哪里添加

google.maps.event.addDomListener（窗口“加载”，初始化）
我创建了两个示例，其中地图在jQM对话框中打开。第一个示例包含一个带有映射的独立对话框。第二个示例包含带有链接的jQM页面。单击链接后将打开该对话框
<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.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="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
        <script type="text/javascript">

            var demoCenter = new google.maps.LatLng(41,-87),
                map;

            function initialize()
            {
                map = new google.maps.Map(document.getElementById('map_canvas'), {
                   zoom: 7,
                   center: demoCenter,
                   mapTypeId: google.maps.MapTypeId.ROADMAP
                 });
            }
            $(document).on("pageinit", "#basic-map", function() {
                initialize();
            });

        </script>
    </head>
    <body>
        <div id="basic-map" data-role="dialog">
            <div data-role="header">
                <h1><a href="/">jQuery mobile with Google maps v3</a> examples</h1>
                <a data-rel="back">Back</a>
            </div>
            <div data-role="content">   
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
            </div>
        </div>      
    </body>
</html>


带谷歌地图的jQuery手机-谷歌地图jQuery插件
var demoCenter=new google.maps.LatLng（41，-87），
地图；
函数初始化（）
{
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：7，
中心：人口中心，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
}
$（document）.on（“pageinit”，“基本映射”，function（））{
初始化（）；
});
例子
例子
例子
返回

我希望这有帮助。
地图画布div在渲染页面中是否有大小？initialize函数正在运行吗？我尝试过使用内联样式强制大小，但没有任何区别。如果我自己运行这个页面，它会显示良好。但如果从jqm对话框方法调用它，则不会触发初始化（不会写入console.log）。加载外部页面时，
标记中的任何内容都将被忽略。将只导入
中的代码。我已将脚本移动到标记中，但它仍然拒绝显示。正在取得进展……我必须将所有JS代码放入标记中，而不仅仅是放入标记中。我仍然有一个空白页，但至少对话框的大小是正确的。。。。。