个人中心
gpt4 book ai didi

jquery - PhoneGap 移动应用程序上的 Google map 路线

转载 作者：行者123 更新时间：2023-12-01 02:44:12 26 4
gpt4 key购买 nike

我试图使用您创建的示例作为使用谷歌地图的清晰指示示例。我使用的代码是:

<!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>

它在普通浏览器中运行得很好；然而，当我尝试在 Android 或 iOS 应用程序中显示它时，它只显示一个没有 map 的灰色框，当您单击方向时，它不会执行任何操作。你知道我做错了什么吗？

最佳答案

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>

关于jquery - PhoneGap 移动应用程序上的 Google map 路线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16256885/

26 4 0
文章推荐： jquery - 如何将 add rel ="lightbox"附加到特定链接？
文章推荐： Javascript document.lastModified 返回美国日期格式
文章推荐： javascript - 是否有带有对象的 JS "scope block"？
文章推荐： jquery - 全局过滤ajax成功处理程序
行者123
个人简介

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

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