那些遇到过的问题

PhoneGap移动应用程序上的谷歌地图方向

Ram*_*mad 2 maps jquery

我试图使用您创建的示例,使用谷歌地图创建方向的简洁示例.我使用的代码是:

<!doctype html>
<html lang="en">
<head>
    <title>jQuery mobile with Google maps</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link href="../themes/theme1.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
    <script type="text/javascript">

        var map,
            currentPosition,
            directionsDisplay, 
            directionsService;

        function initialize(lat, lon)
        {
            directionsDisplay = new google.maps.DirectionsRenderer(); 
            directionsService = new google.maps.DirectionsService();

            currentPosition = new google.maps.LatLng(lat, lon);

            map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 15,
               center: currentPosition,
               mapTypeId: google.maps.MapTypeId.ROADMAP
             });

            directionsDisplay.setMap(map);

             var currentPositionMarker = new google.maps.Marker({
                position: currentPosition,
                map: map,
                title: "Current position"
            });

            var infowindow = new google.maps.InfoWindow();
            google.maps.event.addListener(currentPositionMarker, 'click', function() {
                infowindow.setContent("Current position: latitude: " + lat +" longitude: "   + lon);
                infowindow.open(map, currentPositionMarker);
            });
        }

        function locError(error) {
            // initialize map with a static predefined latitude, longitude
           initialize(59.3426606750, 18.0736160278);
        }

        function locSuccess(position) {
            initialize(position.coords.latitude, position.coords.longitude);
        }

        function calculateRoute() {
            var targetDestination = $("#target-dest").val();
            if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
                var request = {
                    origin:currentPosition, 
                    destination:targetDestination,
                    travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                };

                directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setPanel(document.getElementById("directions"));
                        directionsDisplay.setDirections(response); 

                        /*
                            var myRoute = response.routes[0].legs[0];
                            for (var i = 0; i < myRoute.steps.length; i++) {
                                alert(myRoute.steps[i].instructions);
                            }
                        */
                        $("#results").show();
                    }
                    else {
                        $("#results").hide();
                    }
                });
            }
            else {
                $("#results").hide();
            }
        }

        $(document).live("pagebeforeshow", "#map_page", function() {
            navigator.geolocation.getCurrentPosition(locSuccess, locError);
        });

        $(document).on('click', '#directions-button', function(e){
            e.preventDefault();
            calculateRoute();
        });

    </script>
</head>
<body>
    <div id="basic-map" data-role="page" data-theme="d">
        <div data-role="header" data-theme="d">
            <h1>Directions</h1>
            <a href="#page4" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a> 
        </div>
        <div data-role="content" data-theme="d">   
            <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                <div id="map_canvas" style="height:350px;"></div>
            </div>
            <div data-role="fieldcontain" data-theme="d">
                <input type="text" name="target-dest" id="target-dest" value="13002 Rivers Bend Road, Chester, VA"  />
            </div>
            <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
            <div id="results" style="display:none;">
                <div id="directions"></div>
            </div>
        </div>
    </div>      
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

它在普通浏览器中运行良好; 然而,当我尝试在Android或ios应用程序中显示它时,它只显示一个没有地图的灰色框,当你点击方向时,它什么都不做.你知道我做错了吗？

Apo*_*dis 5

Android配置:

AndroidManifest.xml中需要以下权限:

  • <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
  • <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
  • <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
  • <uses-permission android:name="android.permission.INTERNET" />

以下插件应该存在于res/xml/config.xml中:

  • <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>

iOS配置:

在config.xml中添加<plugin name="Geolocation" value="CDVLocation" />.

以下代码已在使用Cordova 2.6.0的混合应用程序上成功测试.

<!doctype html>
<html lang="en">

    <head>
        <title>jQuery mobile with Google maps</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link href="../themes/theme1.css" rel="stylesheet" type="text/css">
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
        <script type="text/javascript">
            var map,
                currentPosition,
                directionsDisplay,
                directionsService;

            function initialize(lat, lon) {
                directionsDisplay = new google.maps.DirectionsRenderer();
                directionsService = new google.maps.DirectionsService();

                currentPosition = new google.maps.LatLng(lat, lon);

                map = new google.maps.Map(document.getElementById('map_canvas'), {
                    zoom: 15,
                    center: currentPosition,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });

                directionsDisplay.setMap(map);

                var currentPositionMarker = new google.maps.Marker({
                    position: currentPosition,
                    map: map,
                    title: "Current position"
                });

                var infowindow = new google.maps.InfoWindow();
                google.maps.event.addListener(currentPositionMarker, 'click', function () {
                    infowindow.setContent("Current position: latitude: " + lat + " longitude: " + lon);
                    infowindow.open(map, currentPositionMarker);
                });
            }

            function locError(error) {
                // initialize map with a static predefined latitude, longitude
                initialize(59.3426606750, 18.0736160278);
            }

            function locSuccess(position) {
                initialize(position.coords.latitude, position.coords.longitude);
            }

            function calculateRoute() {
                var targetDestination = $("#target-dest").val();
                if (currentPosition && currentPosition != '' && targetDestination && targetDestination != '') {
                    var request = {
                        origin: currentPosition,
                        destination: targetDestination,
                        travelMode: google.maps.DirectionsTravelMode["DRIVING"]
                    };

                    directionsService.route(request, function (response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setPanel(document.getElementById("directions"));
                            directionsDisplay.setDirections(response);

                            /*
                            var myRoute = response.routes[0].legs[0];
                            for (var i = 0; i < myRoute.steps.length; i++) {
                                alert(myRoute.steps[i].instructions);
                            }
                        */
                            $("#results").show();
                        } else {
                            $("#results").hide();
                        }
                    });
                } else {
                    $("#results").hide();
                }
            }

            $(document).on('click', '#directions-button', function (e) {
                e.preventDefault();
                calculateRoute();
            });
        </script>
        <script type="text/javascript" src="cordova-2.6.0.js"></script>
        <script type="text/javascript">
            var showGeolocationInfo = function() {
                navigator.geolocation.getCurrentPosition(locSuccess, locError);
            }
            function init(){
                document.addEventListener("deviceready", showGeolocationInfo, true);
            }
        </script>
    </head>

    <body onload="init();">
        <div id="basic-map" data-role="page" data-theme="d">
            <div data-role="header" data-theme="d">
                 <h1>Directions</h1>
                 <a href="#page4" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a> 
            </div>
            <div data-role="content" data-theme="d">
                <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
                    <div id="map_canvas" style="height:350px;"></div>
                </div>
                <div data-role="fieldcontain" data-theme="d">
                    <input type="text" name="target-dest" id="target-dest" value="13002 Rivers Bend Road, Chester, VA" />
                </div> <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>

                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>
    </body>

</html>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

10387 次

最近记录：

12 年，4 月 前
相关归档
不推荐使用event.returnValue.请改用标准的event.preventDefault() 220
jquery中的wait()或sleep()函数？ 93
令人满意的单行输入 56
JQuery从列表中获取所有数据属性 22
如何使用npm加载引导程序？ 21
JQuery UI自动完成 - 在提示输入后隐藏列表 20
jQuery Infinite Scroll和Gridview 18
jQuery.expr [':']如何工作以及jQuery1.8.x及更高版本的文档在哪里？ 18
Android Polyline - 逐点添加 8
Ionic - Apple Maps App中的开放式导航方向 3
难疑归档
舍入到最多2位小数(仅在必要时) 2492
需要一个没有任何子弹的无序列表 2408
如何让Git使用我选择的编辑器进行提交？ 2362
在上传图像之前预览图像 1476
.gitignore被Git忽略了 1407
Android中的gravity和layout_gravity有什么区别？ 1286
为什么自闭脚本标签不起作用？ 1284
visibility:hidden和display:none之间有什么区别？ 1121
JavaScript中的(内置)方式,用于检查字符串是否为有效数字 1051
致命错误:Python.h:没有这样的文件或目录 1042