谷歌地图整合到Phonegap

我想在我的Phonegap应用程序中使用Google Maps API v3。目前我能够让地图显示在我的本地主机上，但是当我将它上传到Phonegap版本，并尝试在android模拟器上查看它时，jquery移动框架无法加载该页面。谷歌地图整合到Phonegap

我不知所措，我已经看过这里所有的GMap问题，但没有发现任何有用的信息。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=screen.width, initial-scale=1.0, user-scalable=no" /> 
    <title>DD Buddy App</title> 
    <link rel="stylesheet" href="themes/ddBuddy.min.css" /> 
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" /> 
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 
    $(document).on('mobileinit', function() { 
     $.mobile.defaultPageTransition = 'slide'; 
    }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
    <script src="js/parse-1.2.16.min.js"></script> 
    <!-- cordova --> 
    <script src="phonegap.js"></script> 
</head> 
<body class="site"> 
    <!-- Home/Landing Page --> 
    <div data-role="page" data-theme="a" id="map"> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="maps/jquery.ui.map.js"></script> 
     <script type="text/javascript" src="maps/jquery.ui.map.services.js"></script> 
     <div data-role="header" data-position="inline" class="header"> 
      <img src="img/logo.png" title="logo" class="logo" /> 
      <img src="img/home.png" title="home" class="homeImg" /> 
      <img src="img/menu.png" title="menu" class="menuImg" /> 
     </div> 
     <div class="ui-content ui-page-theme-a" data-form="ui-page-theme-a" data-theme="a" role="main"> 
      <div id="map_canvas" style="width:100%;height:500px;background-color:#CCC;"></div> 
     </div> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
     <script type="text/javascript" src="ui/jquery.ui.map.js"></script> 
     <script type="text/javascript"> 
     $(function(){ 
      $("#map_canvas").gmap(); 
      $(".menuImg").on("touchend", function(){ 
       $.mobile.changePage("menu.html", { 
        transition: 'slide' 
       }); 
      }); 
      $(".homeImg").on("touchend", function(){ 
       $.mobile.changePage("home.html", { 
        transition: 'slide' 
       }); 
      }); 
     }); 
     </script> 
    </div> 
</body> 
</html>

来源

2014-02-18 Zach Case

你的config.xml中设置了'吗？ –

我做;这里是我的整个权限区域： '<！ - 允许本地页面 - > ' –

我不是100％确定您可以多次设置该值。第一个实例应该覆盖所有内容，尝试删除其后的所有其他实例，然后查看是否会改变任何内容。 –

在继续之前（我会查看代码），我建议的第一件事是将所有脚本调用替换为本地代码。我的意思是下载一个jQuery手机副本并将其存储在资产文件夹中，而不是每次从服务器调用它。所有的CSS和本地存储的都一样。不要忘记你正在部署在移动设备上，人们很可能会在他们的移动数据上拥有数据上限，所以你想尽可能保持你的应用程序数据清晰。一旦我在手机上放置了一个版本，我就会很快更新答案，看看有什么不对。

周华健

你的代码是相当混乱，它看起来像一个复制粘贴&甚至不用检查什么。我清除它一点应该是更接近这个：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=screen.width, initial-scale=1.0, user-scalable=no" /> 
    <title>DD Buddy App</title> 
    <link rel="stylesheet" href="themes/ddBuddy.min.css" /> 
    <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" /> 
    <link rel="stylesheet" href="css/style.css" type="text/css" /> 
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript" src="ui/jquery.ui.map.js"></script> 
    <script src="js/parse-1.2.16.min.js"></script> 
    <script src="phonegap.js"></script> 
    <!-- cordova --> 
</head> 
<body class="site"> 
    <!-- Home/Landing Page --> 
    <div data-role="page" data-theme="a" id="map"> 
     <div data-role="header" data-position="inline" class="header"> 
      <img src="img/logo.png" title="logo" class="logo" /> 
      <img src="img/home.png" title="home" class="homeImg" /> 
      <img src="img/menu.png" title="menu" class="menuImg" /> 
     </div> 
     <div class="ui-content ui-page-theme-a" data-form="ui-page-theme-a" data-theme="a" role="main"> 
      <div id="map_canvas" style="width:100%;height:500px;background-color:#CCC;"></div> 
     </div> 
     <script type="text/javascript"> 
     $(document).on('mobileinit', function() { 
     $.mobile.defaultPageTransition = 'slide'; 
     }); 
      $(function(){ 
      $("#map_canvas").gmap(); 
      $(".menuImg").on("touchend", function(){ 
       $.mobile.changePage("menu.html", { 
        transition: 'slide' 
       }); 
      }); 
      $(".homeImg").on("touchend", function(){ 
       $.mobile.changePage("home.html", { 
        transition: 'slide' 
       }); 
      }); 
     }); 
     </script> 
    </div> 
</body> 
</html>

注： - 确保你有一个包含了jquery.ui.map.js 你的资产/ WWW文件夹内的文件夹的用户界面 - 如前所述，在本地下载副本并存储每个JS和CSS的副本，并避免每次拨打互联网时拨打电话 - 确保删除不必要的库（您在哪里使用解析js？）

现在所有这一切说，如果你做这一切，并使用上面的代码，你会有地图显示在你的手机上，我不知道模拟器，因为我从来没有使用模拟器我用真实用于测试的设备。

来源

2014-02-18 20:13:18

想到我发现了这个问题，但这有帮助！这个问题是在jQuery Mobiles结束。由于它是异步加载页面的，因此它需要的脚本会在加载页面div时搞乱加载。但在外面时不会加载。解决方法是在主索引文件中也包含map api所需的脚本。 –

如果你在索引中放置map api，那么也不要在这里加载它。 –

谷歌地图整合到Phonegap

回答

相关问题