Question

我有一个人们使用Android设备的JQuery Mobile网站（本网站主要处理客户信息。）
我一直在寻求整合“GET DIRECTION”功能我想知道是否可以通过JQM打开Google导航应用程序（因为它可以用作GPS，语音导航），当前位置和一个客户端的地址？如果没有，有人有任何建议吗？

Answer 1

官方W3C网站通知W3C Geolocation working group以及已设定的里程碑。

您可以在地理定位API中找到here新的（2012年5月）W3C草案提案。

您可以在下面找到我创建的示例工作示例。代码找到当前位置并提供方向服务。有一个文本框，您可以在其中编写目标目标和一个“获取方向”的按钮。单击该按钮时，页面末尾的列表将填充说明。

您可以修改它以满足您的需求。此外，您可以在Google Map JavaScript API Directions Service中找到有关路线服务的更多信息。

<!doctype html>
<html lang="en">
   <head>
        <title>jQuery mobile with Google maps</title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.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;
            var currentPosition;
            var directionsDisplay = new google.maps.DirectionsRenderer();         
            var directionsService = new google.maps.DirectionsService();

            function initialize(lat, lon)
            {
                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);
                //directionsDisplay.setPanel($("#instructions-content"));

                 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) 
            {
                alert("The position or the map could not be loaded.");
            }

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

            $(document).ready(function() 
            {
                navigator.geolocation.getCurrentPosition(locSuccess, locError);

                $("#directions-button").click(function(){
                    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("instructions-content"));
                                directionsDisplay.setDirections(response); 

                                // For debuging reasons uncomment
                                /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                  alert(myRoute.steps[i].instructions);
                                }*/
                            }
                        });
                    }
                    else
                    {
                        alert("The target destination is empty or the current position could not be located.");
                    }
                }); 
            });
        </script>
    </head>
    <body>
        <div id="basic-map" data-role="page">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
            </div>
            <div data-role="content">   
                <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">
                    <label for="name">Target Destination:</label>
                    <input type="text" name="target-dest" id="target-dest" value=""  />
                </div>
                <a href="#" id="directions-button" data-role="button" data-inline="true" data-mini="true">Get Directions</a>
                <div data-role="collapsible" id="instructions-container">
                   <h3>Instructions</h3>
                   <p><div id="instructions-content"></div></p>
                </div>
            </div>
        </div>      
    </body>
</html>

将HTML代码放在文件map.html中，并使用Mozilla Firefox直接打开它（如果您不想将其放在服务器上并进行测试）。否则将文件放在服务器上，并使用您想要的任何浏览器打开它。

最初，系统会询问您是否要分享当前位置。按Share（分享）按钮后，您将看到一个带有标记的地图，显示您当前的位置。如果单击标记，您将看到纬度和经度。

enter image description here

我希望这会有所帮助。

jQuery Mobile - 谷歌导航 - 路线服务 - 当前位置识别

1 个答案: