2014-07-24 100 views
1

我刚开始使用棘轮,它很棒。 我正在开发一个使用push.js进行页面之间转换的Ratchet 2.0.2的Phonegap应用程序。 但我canot运行外部JavaScript的。 我选了this通过棘轮加载外部地图脚本v2.0.2

但我无法加载googlemap javascript v3。

我的HTML页面

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="utf-8"> 
      <title>Movie finder</title> 
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui"> 
      <meta name="apple-mobile-web-app-capable" content="yes"> 
      <meta name="apple-mobile-web-app-status-bar-style" content="black"> 

      <link rel="stylesheet" href="css/ratchet.min.css"> 
     </head> 
     <body> 
      <header class="bar bar-nav"> 
       <a class="btn btn-link btn-nav pull-left" href="interests.html" data-transition="slide-out"> 
        <span class="icon icon-left-nav"></span> 
        Back 
       </a> 
       <h1 class="title">Map</h1> 
      </header> 
    <style> 
      #map-canvas { 
      height: 100%; 
      margin: 0px; 
      padding: 0px 
      } 
     </style> 
      <div class="content"> 
       <button class="btn" onClick="initialize();">click</button> 
       <div id="map-canvas"></div> 
      </div> 
     </body> 
     <script src="js/ratchet.min.js"></script>  
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
     <script> 
      function initialize() { 
       var map; 
       var mapOptions = { 
        zoom: 8, 
        center: new google.maps.LatLng(-34.397, 150.644) 
       }; 
       map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 
      } 
      google.maps.event.addDomListener(window, 'load', initialize); 
     </script> 
    </html> 

请帮我加载谷歌地图在棘轮

回答

1

你的地图是地图中的容器,当文档加载和您的地图初始化是0像素高。给它一个高度,并检查出你的地图。

.content {height: 100%} 

不需要初始化按钮。初始化负载就足够了。

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

http://jsfiddle.net/a910o99w/

+0

代码工作的主页上。我想在我的联系人页面访问这张地图。但可悲的是,它不工作。 – Dino

+0

我相信它的东西很小。确保你在联系页面上加载谷歌地图js文件,并检查控制台日志是否有错误。 – kindasimple

+0

棘轮使用PUSH功能。它防止外部脚本。我使用'data-ignore =“push”'来防止这种情况。但这不是一个更好的方法。我必须找到另一种方法来实现这一点。因为当使用数据忽略时,其过渡效果消失了。 – Dino