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

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

jquery maps

Jquery PhoneGap移动应用程序上的谷歌地图方向,jquery,maps,Jquery,Maps,我试着用你创建的一个例子来说明谷歌地图的方向。我使用的代码是： <!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"

我试着用你创建的一个例子来说明谷歌地图的方向。我使用的代码是：

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


jquerymobile与谷歌地图
var映射，
当前位置，
方向显示，
指导服务；
函数初始化（横向、纵向）
{
directionsDisplay=new google.maps.DirectionsRenderer（）；
directionsService=new google.maps.directionsService（）；
currentPosition=新的google.maps.LatLng（lat，lon）；
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：15，
中心：当前位置，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
方向显示.setMap（地图）；
var currentPositionMarker=新的google.maps.Marker({
职位：当前职位，
地图：地图，
标题：“当前职位”
});
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（currentPositionMarker，'click'，function（）{
setContent（“当前位置：纬度：“+lat+”经度：“+lon”）；
打开（地图，当前位置标记）；
});
}
函数locError（错误）{
//使用静态预定义的纬度、经度初始化地图
初始化（59.3426606750，18.0736160278）；
}
职能（职位）{
初始化（position.coords.lation，position.coords.longitude）；
}
函数计算器输出（）{
var targetDestination=$（“#target dest”）.val（）；
如果（currentPosition&¤tPosition！=''&&targetDestination&&targetDestination！=''）{
var请求={
原点：当前位置，
目的地：targetDestination，
travelMode:google.maps.DirectionsTravelMode[“驾驶”]
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
directionsDisplay.setPanel（document.getElementById（“方向”）；
方向显示。设置方向（响应）；
/*
var myRoute=response.routes[0]。legs[0]；
对于（var i=0；i


它在普通浏览器中运行良好；然而，当我尝试在android或ios应用程序中显示它时，它只会显示一个没有地图的灰色框，当你点击方向时，它不会做任何事情。你知道我做错了什么吗。
安卓配置：
AndroidManifest.xml中需要以下权限：






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



iOS配置：
在config.xml中添加

以下代码已在使用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>


jquerymobile与谷歌地图
var映射，
当前位置，
方向显示，
指导服务；
函数初始化（横向、纵向）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
directionsService=new google.maps.directionsService（）；
currentPosition=新的google.maps.LatLng（lat，lon）；
map=new google.maps.map（document.getElementById（'map_canvas'）{
缩放：15，
中心：当前位置，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
方向显示.setMap（地图）；
var currentPositionMarker=新的google.maps.Marker({
职位：当前职位，
地图：地图，
标题：“当前职位”
});
var infowindow=new google.maps.infowindow（）；
google.maps.event.addListener（currentPositionMarker，'click'，函数（）{
setContent（“当前位置：纬度：“+lat+”经度：“+lon”）；
打开（地图，当前位置标记）；
});
}
函数locError（错误）{
//使用静态预定义的纬度、经度初始化地图
初始化（59.3426606750，18.0736160278）；
}
职能（职位）{
初始化（position.coords.lation，position.coords.longitude）；
}
函数计算器输出（）{
 <!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="assets/www/themes/theme1.css" rel="stylesheet" type="text/css">
    <link href="assets/www/css/my.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="assets/www/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 data-role="page" id="page" data-theme="d">
 <img src="assets/www/images/hometitle.png" id="img1"/>
 <div class="center-button">
<div data-role="content" id="content1"> 

        <a href="#page2" data-role="button" id="ui-btn" >Curriculum</a>
        <a href="#page3" data-role="button" id="ui-btn">About Us</a>
        <a href="#page4" data-role="button" id="ui-btn">Events</a>
        <a href="#page5" data-role="button" id="ui-btn">Contact Us</a>
        <a href="#page7" data-role="button" id="ui-btn">Register</a>
</div>
    </div>
    </div>

 <div data-role="page" id="page2" data-theme="d">
<div data-role="header" data-theme="d">
    <h1>Curriculum</h1>
     <a href="index.html" class="ui-btn-left" data-icon="home"               data-iconpos="notext" data-direction="reverse">Home</a> 
</div>
<div data-role="content" id="content1"> 
<h3>About Our Curriculum</h3>
The preschool uses a Creative Curriculum to create an environment that supports learning      through play and discovery in a variety of interest centers.  This curriculum also helps teachers develop appropriate smalland large group activities to enhance child development.  The activities presented thoughout the curricula focus on particular themes, introduction of various concepts, and include many subject areas: reading, social studies, math, science, and physical education.Progress is observed and documented in all developmental areas.

<h3>Classes Offered</h3>
Children must be 2 ½ old by September 30th.<br/>                
Preschool hours are from 9:30am to 12:30pm.<br/><br/>

<b>Three-Year-Old Classes:</b><br/><br/>
Monday, Tuesday, and Thursday  or (3 day program)<br/>      

Monday, Tuesday, Thursday, and Friday (4 day program)<br/><br/>



<b>Four-Year-Old Classes:</b> <br/><br/>

Monday, Tuesday, Thursday, and Friday<br/><br/>

We also offer a “Lunch Bunch” program that will extend your child’s day until 2pm. 

</div>
</div>

<div data-role="page" id="page3" data-theme="d">
<div data-role="header" data-theme="d">
    <h1>About Us</h1>
    <a href="index.html" class="ui-btn-left" data-icon="home"                data-iconpos="notext" data-direction="reverse">Home</a> 
</div>
<div data-role="content" id="content1"> 
<p>&nbsp;&nbsp;BHCDC was created as an independent non-profit corporation to meet the growing need in the Enon area for education and kindergarten readiness.  For 30 years the preschool has been offering a happy, safe, and loving environment providing the highest quality care possible to 2 ½ to 5- year- old children. The preschool is open to all children without regard to their religious, racial, cultural backgrounds, or abilities.  BHCDC is licensed through the Department of Social Services of Virginia.</p>
</div>
</div>

<div data-role="page" id="page4" data-theme="d">
<div data-role="header" data-theme="d">
    <h1>Events</h1>
    <a href="index.html" class="ui-btn-left" data-icon="home"                data-iconpos="notext" data-direction="reverse">Home</a>
</div>
<div data-role="content" data-theme="d" id="content1">
  <div data-role="collapsible-set">
    <div data-role="collapsible" >
      <h3>School Supplies Fundraiser</h3>
      <table width="100%" border="0" cellpadding="10" id="table1">
        <tr>
         <td>
         <h4> 4/1/2013 - 4/30/2013</h4>
             <p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
             <a href="#page8" data-role="button">Take                                Me There</a>
         </td>
        </tr>
      </table>
    </div>
    <div data-role="collapsible" data-collapsed="true">
      <h3>Event 2</h3>
      <table width="100%" border="0" cellpadding="10" id="table1">
        <tr>
         <td>
         <h4> 4/1/2013 - 4/30/2013</h4>
             <p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
             <a href="#page9"data-role="button">Take                                 Me There</a>
         </td>
        </tr>
      </table>
    </div>
    <div data-role="collapsible" data-collapsed="true">
     <h3>Event 3</h3>
      <table width="100%" border="0" cellpadding="10" id="table1">
        <tr>
         <td>
         <h4> 4/1/2013 - 4/30/2013</h4>
             <p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
             <a href="#page10"data-role="button">Take                                Me There</a>
         </td>
        </tr>
      </table>
    </div>
     <div data-role="collapsible" data-collapsed="true">
      <h3>Event 4</h3>
      <table width="100%" border="0" cellpadding="10" id="table1">
        <tr>
         <td>
         <h4> 4/1/2013 - 4/30/2013</h4>
             <p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
             <a href="#page11"data-role="button">Take                                Me There</a>
         </td>
        </tr>
      </table>
    </div>
     <div data-role="collapsible" data-collapsed="true">
      <h3>Event 5</h3>
      <table width="100%" border="0" cellpadding="10" id="table1">
        <tr>
         <td>
         <h4> 4/1/2013 - 4/30/2013</h4>
             <p>Currently the Chester Virginia area is running low on donated school supplies for under privlaged children. It is our mission to collect enough supplies for 20 children. Any donations are welcome. We have set up a donations box at the local Office Max. For directions click the button below:</p>
             <a href="#page12"data-role="button">Take                                Me There</a>
         </td>
        </tr>
      </table>
    </div>
    </div>          
    </div>
</div>
</div>
<div data-role="page" id="page5" data-theme="d">
<div data-role="header" data-theme="d">
    <h1>Contact Us</h1>
     <a href="index.html" class="ui-btn-left" data-icon="home"               data-   iconpos="notext" data-direction="reverse">Home</a> 
</div>
<div data-role="content" id="content1"> 
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=d&amp;source=s_d&amp;saddr=2025+Florence+Avenue,+Chester,+VA&amp;daddr=&amp;hl=en&amp;geocode=&amp;aq=0&amp;oq=2025+Florence+Avenuechest&amp;sll=38.003385,-79.420925&amp;sspn=5.799074,11.634521&amp;mra=ls&amp;ie=UTF8&amp;t=m&amp;ll=37.32915,-77.321348&amp;spn=0.011944,0.017166&amp;z=15&amp;output=embed"></iframe>
</div><br/>
<table width="100%"  border="0" id="table1" >
<tr>
 <td>
<h3> &nbsp;&nbsp;Contact Information</h3>
<blockquote> 
    Address:<blockquote>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2025 Florence Ave<br/><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Chester Virginia, 23836
</blockquote></blockquote>

<blockquote>Phone:<blockquote>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(804) 319-9183</blockquote>  </blockquote>

<a href="#page6" data-role="button"> Contact Us Via Email</a>
</td>
</tr>
</table>
</div>
</div>
<div data-role="page" id="page6" data-theme="d">
<div data-role="header" data-theme="d">
    <h1>Contact Us</h1>
     <a href="#page5" class="ui-btn-left" data-icon="back" data-iconpos="notext" data-direction="reverse">Events</a>  
</div>
  <div data-role="content" id="content1">
  <iframe height="597" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none"  src="http://ramee.wufoo.com/embed/z7x3p3/"><a href="http://ramee.wufoo.com/forms/z7x3p3/">Fill out my Wufoo form!</a></iframe>
  </div>
  </div>

<div data-role="page" id="page7" data-theme="d">
<div data-role="header" data-theme="d">
    <h1>Register</h1>
     <a href="index.html" class="ui-btn-left" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>  
</div>
<div data-role="content" id="content1">
<iframe height="885" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%;border:none"  src="http://ramee.wufoo.com/embed/m7x3z9/"><a href="http://ramee.wufoo.com/forms/m7x3z9/">Fill out my Wufoo form!</a></iframe>
</div>
</div>

<div data-role="page"  id="page8" id="basic-map"  >
 <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="" />
            </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>

<div data-role="page"  id="page8" id="basic-map"  >