1

我有一个人们在他们的 Android 设备上使用的 JQuery Mobile 网站。
（这个网站主要处理客户信息。）
我一直在寻找集成“获取方向”功能。
我想知道是否可以通过 JQM 打开具有当前位置和一个客户地址的 Google 导航应用程序（因为它可以用作 GPS、语音导航）？
如果没有，有人有什么建议吗？

4

1 回答 1

3

W3C 官方网站介绍了W3C 地理定位工作组和已设定的里程碑。

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

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

您可以对其进行修改以满足您的需求。此外，您可以在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 打开它（以防您不想将它放在服务器上进行测试）。否则将文件放在服务器上并使用您想要的任何浏览器打开它。

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

在此处输入图像描述

在此处输入图像描述

我希望这有帮助。

于 2012-08-25T15:55:39.690 回答