在 jquery mobile 中使用谷歌地图的清晰方向示例? [英] clean example of directions with google maps in jquery mobile?
问题描述
尝试获得一个有效的 jquery 移动地图方向页面.列出了这个例子:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#directions_map
但是示例代码很乱,无法运行:(.宜家使用它.
http://m.ikea.com/nl/nl/stores/415/map/
但他们也非常定制了 js,所以很难看出会发生什么.
有谁知道一个很好的简洁示例或易于遵循的实现?
您可以在下面找到在 jQuery Mobile 页面中使用 Google 地图路线服务的基本示例.
<头><title>带有 Google 地图地理方向示例的 jQuery mobile</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() {初始化();});$(document).on('click', '#submit', function(e) {e.preventDefault();计算路线();});var方向显示,路线服务 = 新的 google.maps.DirectionsService(),地图;函数初始化(){方向显示 = 新 google.maps.DirectionsRenderer();var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278);var myOptions = {缩放:10,mapTypeId: google.maps.MapTypeId.ROADMAP,中心:地图中心}map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);DirectionsDisplay.setMap(地图);DirectionsDisplay.setPanel(document.getElementById("directions"));}函数计算路由(){var selectedMode = $("#mode").val(),start = $("#from").val(),end = $("#to").val();如果(开始 == '' || 结束 == ''){//无法计算路线$("#results").hide();返回;}别的{无功请求 = {起源:开始,目的地:结束,travelMode: google.maps.DirectionsTravelMode[selectedMode]};路线Service.route(请求,功能(响应,状态){如果(状态 == google.maps.DirectionsStatus.OK){DirectionsDisplay.setDirections(响应);$("#results").show();/*var myRoute = response.routes[0].legs[0];for (var i = 0; i < myRoute.steps.length; i++) {警报(myRoute.steps[i].instructions);}*/}别的 {$("#results").hide();}});}}头部><身体><div data-role="page" id="map_page"><div data-role="header"><h1><a href="#">jQuery mobile - Google 地图路线服务</h1>
<div data-role="内容"><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="瑞典哥德堡"/>
<div data-role="fieldcontain"><label for="to">To</label><input type="text" id="to" value="瑞典斯德哥尔摩"/>
<div data-role="fieldcontain"><label for="mode" class="select">运输方式:</label><select name="select-choice-0" id="mode"><option value="驾驶">驾驶</option><option value="WALKING">Walking</option><option value="BICYCLING">骑自行车</option></选择>