简单的GoogleMap只是灰色背景

时间：2013-09-10 14:06:14

标签： ios google-maps google-maps-api-3 cordova

我想在我的Phonegap iOS应用中显示一张小地图，然后我从[Google Maps API]中复制了示例代码。1

但每次我使用地图导航到页面时，应用程序都会挂起，我需要关闭它。 XCode调试控制台中没有错误。也没有白名单拒绝。这是代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" >
        <link rel="stylesheet" href="css/styles.css" >
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.min.js"></script>
        <script type="application/javascript" src="js/fastclick.js"></script>
        <script src="cordova.js"></script>
    </head>

<body>
    <!-- START PAGE -->
    <div data-role="page" id="tellthedj">

        <!-- JS START -->
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script src="js/functions.js"></script>
        <!-- JS ENDE -->

        <script>
            $(document).off('pageshow', '#tellthedj').on('pageshow', '#tellthedj', function () {

                // Fastclick und Default Transitions
                FastClick.attach(document.body);
                $.mobile.defaultPageTransition   = 'none';
                $.mobile.defaultDialogTransition = 'none';
                $.mobile.buttonMarkup.hoverDelay = 0;

                // GET URL Parameter
                stadt = GetURLParameter('stadt');
                eventName = GetURLParameter('eventName');
                eventID = GetURLParameter('id');

                // Header beschriften
                $('#headline').empty();
                $('#headline').append("<span class='head_thin'>"+eventName+"</span>");


                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);
}

            google.maps.event.addDomListener(window, 'load', initialize);



            });
        </script>
        <!-- JS ENDE -->

        <!-- START HEADER -->
        <div data-role="header" class="header" data-id="persistent" data-position="fixed" data-tap-toggle="false">
            <h1 id="headline"></h1>
            <a data-role="none" class="events_button ui-btn-right"><img src="img/events_button.png"></a>
        </div>
        <!-- ENDE HEADER -->


        <!-- START CONTENT -->
        <div data-role="content">
            <div id="map-canvas" style="height:200px; width:200px;"></div>
        </div>
        <!-- ENDE CONTENT -->


        <!-- START FOOTER -->
        <div data-role="footer" data-position="fixed" id="footer" data-id="footer" data-tap-toggle="false">
            <div data-role="none" class="menu_home"><img src="img/navi_home.jpg" style="width:100%"></div>
            <div data-role="none" class="menu_music"><img src="img/navi_music_active.jpg" style="width:100%"></div>
            <div data-role="none" class="menu_review"><img src="img/navi_review.jpg" style="width:100%"></div>
            <div data-role="none" class="menu_photos"><img src="img/navi_photo.jpg" style="width:100%"></div>
        </div>
        <!-- ENDE FOOTER -->

    </div>
    <!-- ENDE PAGE -->
</body>
</html>

编辑：在桌面或移动浏览器中正常运行......

编辑：现在Canvas工作但不显示任何地图......只有灰色。我的代码： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" >
        <link rel="stylesheet" href="css/styles.css" >
        <script src="js/jquery-1.8.3.min.js"></script>
        <script src="js/jquery.mobile-1.3.1.min.js"></script>
        <script type="application/javascript" src="js/fastclick.js"></script>
        <script src="cordova.js"></script>

    </head>

<body>
    <!-- START PAGE -->
    <div data-role="page" id="tellthedj">

        <!-- JS START -->
        <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
            google.maps.event.trigger(map, "resize");
      }
    </script>
        <script>
        function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' +
      'callback=initialize';
  document.body.appendChild(script);
}</script>
        <script src="js/functions.js"></script>





        <!-- JS ENDE -->

        <script>
            $(document).off('pageshow', '#tellthedj').on('pageshow', '#tellthedj', function () {


                // Fastclick und Default Transitions
                FastClick.attach(document.body);
                $.mobile.defaultPageTransition   = 'none';
                $.mobile.defaultDialogTransition = 'none';
                $.mobile.buttonMarkup.hoverDelay = 0;

                // GET URL Parameter
                stadt = GetURLParameter('stadt');
                eventName = GetURLParameter('eventName');
                eventID = GetURLParameter('id');

                // Header beschriften
                $('#headline').empty();
                $('#headline').append("<span class='head_thin'>"+eventName+"</span>");


                loadScript();


            });
        </script>
        <!-- JS ENDE -->

        <!-- START HEADER -->
        <div data-role="header" class="header" data-id="persistent" data-position="fixed" data-tap-toggle="false">
            <h1 id="headline"></h1>
            <a data-role="none" class="events_button ui-btn-right"><img src="img/events_button.png"></a>
        </div>
        <!-- ENDE HEADER -->


        <!-- START CONTENT -->
        <div data-role="content">
            <div data-role="none" id="map_canvas" style="height:600px; width:600px;"></div>
        </div>
        <!-- ENDE CONTENT -->


        <!-- START FOOTER -->
        <div data-role="footer" data-position="fixed" id="footer" data-id="footer" data-tap-toggle="false">
            <div data-role="none" class="menu_home"><img src="img/navi_home.png"><div data-role="none" class="navi_schrift" >Home</div></div>
            <div data-role="none" class="menu_music"><img src="img/navi_location_active.png"><div data-role="none" class="navi_schrift" style="color:#460f44">Location</div></div>
            <div data-role="none" class="menu_review"><img src="img/navi_review.png"><div data-role="none" class="navi_schrift">Bewertungen</div></div>
            <div data-role="none" class="menu_photos"><img src="img/navi_photo.png"><div data-role="none" class="navi_schrift">Fotos</div></div>
        </div>
        <!-- ENDE FOOTER -->

    </div>
    <!-- ENDE PAGE -->
</body>
</html>

0 个答案:

没有答案
相关问题
最新问题