谷歌地图在jquery mobile中的方向干净的例子？ [英] clean example of directions with google maps in jquery mobile?

查看：99
本文介绍了谷歌地图在jquery mobile中的方向干净的例子？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

尝试获取可用的jquery移动地图方向页面。
列出了这个例子： 

  http://jquery-ui-map.googlecode.com/svn/这个例子的代码很麻烦，但是这个例子的代码很乱并且一直没有得到它的工作:(。
宜家使用它。
  http：// m .ikea.com / nl / nl / stores / 415 / map / 
  
但他们也非常自定义js所以很难看到会发生什么。
 
 
 
有人知道一个很好的简单示例或实现很容易遵循吗？
 
 
 <$ p 
 $ p $ lt; code><！DOCTYPE html> 
< html> 
< head> 
< title> jQuery mobile with Google maps geo directions example< / title> ; 
< meta content =enhttp-equiv =content-language> 
< link r el =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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 / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en>< /脚本> 
< script type =text / javascript> 
 $（document）.on（pageinit，#map_page，function（）{
 initialize（）; 
}）; 
 $ b $（document）.on（'click'，'#submit'，function（e）{
 e.preventDefault（）; 
 calculateRoute（）; 
}）; 
 
 var directionDisplay，
 directionsService = new google.maps.DirectionsService（），
 map; 
 
函数initialize（）
 {
 directionsDisplay = new google.maps.DirectionsRenderer（）; 
 var mapCenter = new google.maps.LatLng（59.3426606750，18.0736160278）; 
 
 var myOptions = {
 zoom：10，
 mapTypeId：google.maps.MapTypeId.ROADMAP，
 center：mapCenter 
} 
 
 map = new google.maps.Map（document.getElementById（map_canvas），myOptions）; 
 directionsDisplay.setMap（map）; 
 directionsDisplay.setPanel（document.getElementById（directions））; 
 
 $ b函数calculateRoute（）
 {
 var selectedMode = $（＃mode）。val（），
 start = $（ #from）。val（），
 end = $（＃to）。val（）; 
 
 if（start ==''|| end ==''）
 {
 //无法计算路线
 $（＃results）。hide （）; 
 return; 
} 
 else 
 {
 var request = {
 origin：start，
 destination：end，
 travelMode：google.maps.DirectionsTravelMode [selectedMode] 
}; 
 
 directionsService.route（request，function（response，status）{
 if（status == google.maps.DirectionsStatus.OK）{
 directionsDisplay.setDirections（response）; 
 $（＃results）。show（）; 
 / * 
 var myRoute = response.routes [0] .legs [0]; 
 for（var i = 0; i< myRoute.steps.length; i ++）{
 alert（myRoute.steps [i] .instructions）; 
} 
 * / 
} 
 else {
 $（＃results）。hide（）; 
} 
}）; 
 
} 
} 
< / script> 
< / head> 
< body> 
< div data-role =pageid =map_page> 
< div data-role =header> 
< h1>< a href =＃> jQuery mobile  -  Google maps directions service< / h1> 
< / div> 
< div data-role =content> 
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：300px;>< / div> 
< div data-role =fieldcontain> 
< label for =from>从< / label> 
< input type =textid =fromvalue =Sweden Goteborg/> 
< / div> 
< div data-role =fieldcontain> 
< label for =to>至< / label> 
< input type =textid =tovalue =Stockholm，Sweden/> 
< / div> 
< div data-role =fieldcontain> 
< label for =modeclass =select>运输方式：< / label> 
< select name =select-choice-0id =mode> 
< option value =DRIVING> Driving< / option> 
< option value =WALKING>步行< / option> 
< option value =BICYCLING> Bicycling< / option> 
< / select> 
< / div> 
 < / div> 
< div id =resultsstyle =display：none;> 
< div id =directions>< / div> 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>



更新1：

下面的例子使用自动定位的当前位置和用户给出的目标目的地址。 

 <！doctype HTML> 
< html lang =en> 
< head> 
< title>带谷歌地图的jQuery手机< / title> 
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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 / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en>< /脚本> 
< script type =text / javascript> 
 
 var map，
 currentPosition，
 directionsDisplay，
 directionsService; 
 
函数初始化（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：当前位置
} ）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 google.maps.event.addListener（currentPositionMarker，'click'，function（）{
 infowindow.setContent（当前位置：latitude：+ lat +longitude：+ lon）; 
 infowindow.open（map，currentPositionMarker）; 
}）; 
} 
 
函数locError（错误）{
 //用静态预定义的纬度，经度初始化地图
 initialize（59.3426606750，18.0736160278）; 
} 
 
函数locSuccess（position）{
 initialize（position.coords.latitude，position.coords.longitude）; 
 
 
函数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（）; 
 
 
 $ b $（document）.live（pagebeforeshow，#map_page，function（）{
 navigator.geolocation.getCurrentPosition（locSuccess， locError）; 
}）; 
 $ b $（document）.on（'click'，'＃directions-button'，function（e）{
 e.preventDefault（）; 
 calculateRoute（）; 
}）; 
 
< / script> 
< / head> 
< body> 
< div id =basic-mapdata-role =page> 
< div data-role =header> 
< h1>< a data-ajax =falsehref =/> jQuery mobile with Google maps v3< / a>< / h1> 
< / div> 
< div data-role =content> 
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：350px;>< / div> 
< / div> 
< div data-role =fieldcontain> 
< label for =target-dest>目标目的地：< / label> 
< input type =textname =target-destid =target-destvalue =/> 
< / div> 
 < div id =resultsstyle =display：none;> 
< div id =directions>< / div> 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>

更新2：



以下示例将查找当前位置，并自动计算距离并显示当前位置与静态预定义目标位置之间的路线详细信息。

 <！doctype html> 
< html lang =en> 
< head> 
< title>带谷歌地图的jQuery手机< / title> 
< link rel =stylesheethref =http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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 / javascriptsrc =http://maps.google.com/maps/api/js?v=3&sensor=false&language=en>< /脚本> 
< script type =text / javascript> 
 
 var map，
 currentPosition，
 directionsDisplay，
 directionsService，
 destinationLatitude = 59.3426606750，
 destinationLongitude = 18.0736160278; 
 
函数initializeMapAndCalculateRoute（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：当前位置
} ）; 
 
 //当前位置标记信息
 / * 
 var infowindow = new google.maps.InfoWindow（）; 
 google.maps.event.addListener（currentPositionMarker，'click'，function（）{
 infowindow.setContent（当前位置：latitude：+ lat +longitude：+ lon）; 
 infowindow.open（map，currentPositionMarker）; 
}）; 
 * / 
 
 //计算路线
 calculateRoute（）; 
 
 
函数locError（错误）{
 //当前位置找不到
} 
 
函数locSuccess（position） {
 //用当前位置初始化地图并计算路线
 initializeMapAndCalculateRoute（position.coords.latitude，position.coords.longitude）; 
} 
 
 function calculateRoute（）{
 
 var targetDestination = new google.maps.LatLng（destinationLatitude，destinationLongitude）; 
 if（currentPosition！=''&& 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）; 
}）; 
 
< / script> 
< / head> 
< body> 
< div id =basic-mapdata-role =page> 
< div data-role =header> 
< h1>< a data-ajax =falsehref =/> jQuery mobile with Google maps v3< / a>< / h1> 
< / div> 
< div data-role =content> 
< div class =ui-bar-c ui-corner-all ui-shadowstyle =padding：1em;> 
< div id =map_canvasstyle =height：350px;>< / div> 
< / div> 
< div id =resultsstyle =display：none;> 
< div id =directions>< / div> 
< / div> 
< / div> 
< / div> 
< / body> 
< / html>

我希望这有助于您。


Try to get a working jquery mobile maps direction page. There is this example listed:

http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map

But the example code is messy and haven't been able to get it working :(. Ikea uses it. 

http://m.ikea.com/nl/nl/stores/415/map/

but they also very customized the js so its very hard to see what happens.

Does anyone know of a good clean example or implementation that's easy to follow?

解决方案

Below you can find a basic example of using the Google Maps directions service in a jQuery Mobile page.

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery mobile with Google maps geo directions example</title>
        <meta content="en" http-equiv="content-language">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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">
            $(document).on("pageinit", "#map_page", function() {
                initialize();
            });

            $(document).on('click', '#submit', function(e) {
                e.preventDefault();
                calculateRoute();
            });

            var directionDisplay,
                directionsService = new google.maps.DirectionsService(),
                map;

            function initialize() 
            {
                directionsDisplay = new google.maps.DirectionsRenderer();
                var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);

                var myOptions = {
                    zoom:10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    center: mapCenter
                }

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                directionsDisplay.setMap(map);
                directionsDisplay.setPanel(document.getElementById("directions"));  
            }

            function calculateRoute() 
            {
                var selectedMode = $("#mode").val(),
                    start = $("#from").val(),
                    end = $("#to").val();

                if(start == '' || end == '')
                {
                    // cannot calculate route
                    $("#results").hide();
                    return;
                }
                else
                {
                    var request = {
                        origin:start, 
                        destination:end,
                        travelMode: google.maps.DirectionsTravelMode[selectedMode]
                    };

                    directionsService.route(request, function(response, status) {
                        if (status == google.maps.DirectionsStatus.OK) {
                            directionsDisplay.setDirections(response); 
                            $("#results").show();
                            /*
                                var myRoute = response.routes[0].legs[0];
                                for (var i = 0; i < myRoute.steps.length; i++) {
                                    alert(myRoute.steps[i].instructions);
                                }
                            */
                        }
                        else {
                            $("#results").hide();
                        }
                    });

                }
            }
        </script>
    </head>
    <body>
        <div data-role="page" id="map_page">
            <div data-role="header">
                <h1><a href="#">jQuery mobile - Google maps directions service</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:300px;"></div>
                    <div data-role="fieldcontain">
                        <label for="from">From</label> 
                        <input type="text" id="from" value="Goteborg, Sweden"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="to">To</label> 
                        <input type="text" id="to" value="Stockholm, Sweden"/>
                    </div>
                    <div data-role="fieldcontain">
                        <label for="mode" class="select">Transportation method:</label>
                        <select name="select-choice-0" id="mode">
                            <option value="DRIVING">Driving</option>
                            <option value="WALKING">Walking</option>
                            <option value="BICYCLING">Bicycling</option>
                        </select>
                    </div>
                    <a data-icon="search" data-role="button" href="#" id="submit">Get directions</a>
                </div>
                <div id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>
    </body>
</html>

UPDATE 1:

The below example uses the current position which is automatically located and a target destination address which is given from the user.

<!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" />
        <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">
            <div data-role="header">
                <h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a></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="target-dest">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 id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

UPDATE 2:

The below example locates the current position and it automatically calculates the distance and displays the route details between the current location and a static predefined destination location.

<!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" />
        <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,
                destinationLatitude = 59.3426606750,
                destinationLongitude = 18.0736160278;

            function initializeMapAndCalculateRoute(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"
                });

                // current position marker info
                /*
                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);
                });
                */

                // calculate Route
                calculateRoute();
            }

            function locError(error) {
               // the current position could not be located
            }

            function locSuccess(position) {
                // initialize map with current position and calculate the route
                initializeMapAndCalculateRoute(position.coords.latitude, position.coords.longitude);
            }

            function calculateRoute() {

                var targetDestination =  new google.maps.LatLng(destinationLatitude, destinationLongitude);
                if (currentPosition != '' && 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() {
                // find current position and on success initialize map and calculate the route
                navigator.geolocation.getCurrentPosition(locSuccess, locError);
            });

        </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></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 id="results" style="display:none;">
                    <div id="directions"></div>
                </div>
            </div>
        </div>      
    </body>
</html>

I hope this helps.

这篇关于谷歌地图在jquery mobile中的方向干净的例子？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆