个人中心
gpt4 book ai didi

javascript - 谷歌地图与 Phonegap 的集成

转载 作者：行者123 更新时间：2023-11-30 17:36:52 25 4
gpt4 key购买 nike

我正在尝试在我的 Phonegap 应用程序中使用 Google Maps API v3。目前我可以让 map 在我的本地主机上显示得很好，但是当我将其上传到 Phonegap 构建并尝试在 android 模拟器上查看它时，jquery 移动框架无法加载页面。

我很茫然，我已经查看了这里所有的 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>

最佳答案

在继续之前(我将研究代码)，我建议的第一件事是将所有脚本调用替换为本地脚本。我的意思是下载一个 jquery mobile 副本并将其存储在您的 Assets 文件夹中，而不是每次都从服务器调用它。所有的 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>

注意事项: - 确保您的 asset/www 文件夹中有一个 UI 文件夹，其中包含 jquery.ui.map.js - 如前所述，下载副本并将每个 JS 和 CSS 的副本存储在本地，避免每次都调用互联网来获取它们 - 确保删除不必要的库(你在哪里使用解析 js？)

话虽这么说，如果您执行所有这些操作并使用上面的代码，您的手机上就会显示 map ，我不知道模拟器，因为我从不使用模拟器，我使用真实设备进行测试。

关于javascript - 谷歌地图与 Phonegap 的集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21864017/

25 4 0
文章推荐： c - 给定宽度和长度的矩形的包装
文章推荐： c# - 我们可以在 ServicePointManager.SecurityProtocol 中添加四个协议(protocol)吗？
文章推荐： c# - UWP SerialDevice.FromIdAsync 抛出 "Element not found"(HRESULT 异常 : 0x80070490) on Windows 10
文章推荐： c - C 中的数组比较和循环
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com