Question

我正在尝试创建一个全屏谷歌地图网络应用程序，其中jquery面板菜单显示在滑动事件上。但是地图根本不可见，它就像完全被忽略或模糊。我无法弄清楚为什么......你能不能让我知道我在下面的代码中做错了什么？

我按照他们的官方网站上提供的jquery演示版的代码，但仍然无效。

 <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>

    <link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>


    <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
    <script src="/mobile/code/js/easing.js" type="text/javascript"></script>
    <script src="/mobile/code/js/javaModule.js" type="text/javascript"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>

        <style>
    #index,#GMAP {
       width:100%;
       height:100%;
       padding:0;
    }</style>

    <body>
      <div data-role="page" id="index">

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

                <div data-role="panel" id="left-panel" data-theme="b">
                <p>Left Reveal Panel</p>
                <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-left ui-btn-right">Close</a>
                </div>

                <div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="b">
                <p>Right push panel.</p>
                <a href="#" data-rel="close" class="ui-btn ui-corner-all ui-shadow ui-mini ui-btn-inline ui-icon-delete ui-btn-icon-right">Close</a>
                </div>

      </div>



<script>
   $(document).on('pagecreate', '#index', function () {
          $( document ).on( "swipeleft swiperight", "#index", function( e ) {
            
            if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ) {
                if ( e.type === "swipeleft" ) {
                    $( "#right-panel" ).panel( "open" );
                } else if ( e.type === "swiperight" ) {
                    $( "#left-panel" ).panel( "open" );
                }
            }
        });
    });

     $(document).on('pageinit', '#index', function (){

         var myOptions = {
                zoom: 10,
                center: {lat:38.6075, lng:27.0694},
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("GMAP"), myOptions);

         });

    </script>


    </body>
    </html>

Answer 1

<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_HERE"></script>在哪里说MY_KEY_HERE你必须重新考虑一个真实的。

全屏谷歌地图与滑动菜单

1 个答案: