1

私は、人々が Android デバイスで使用する JQuery Mobile Web サイトを持っています。
(この Web サイトは主にクライアント情報を扱っています。)
「GET DIRECTION」機能の統合を検討していました。
JQM を介して、現在の場所と 1 つのクライアントの住所を使用して、Google ナビゲーション アプリ (GPS、音声ナビゲーションとして使用できるため) を開くことができるかどうか疑問に思っていました。
そうでない場合、誰か提案はありますか？

4

1 に答える 1

3

公式の W3C サイトでは、W3C Geolocation ワーキング グループと設定されたマイルストーンについて通知されます。

Geolocation API の最新 (2012 年 5 月) の W3C 草案はこちらにあります。

以下に、私が作成したサンプルの実例を示します。このコードは現在位置を検出し、方向サービスを提供します。目的地を書くテキストボックスと、「ルート案内」ボタンがあります。ボタンをクリックすると、ページの最後のリストに道順が表示されます。

ニーズに合わせて変更できます。さらに、ルート サービスの詳細については、Google Map JavaScript APIルート サービス を参照してください。

<!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 に答える