Question

我正在尝试使用您创建的示例，以便使用Google地图制作一个干净的路线示例。我使用的代码是：

<!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应用程序中显示它时，它只显示一个没有地图的灰色框，当你点击方向时，它什么都不做。你知道我做错了吗？

Answer 1

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>

Answer 2

对于想要将其用于Android移动应用程序的任何人来说，只是一个提醒。如果您使用的是jQuery和PhoneGap，则必须在index.html标题中包含上述所有代码。然后，您只需将地图的html添加到index.html文件旁边的单个页面即可。下面是我基于jQuery的网站工作原理的示例。您仍然需要manifest.xml中的上述代码。

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

还要注意添加地图时页面的定义方式。这些id的顺序标签非常重要。其他明智的jQuery无法识别您网站上的任何页面。

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

id="basic-map"必须持续到最后。

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

2 个答案: