add AMap router

meitu/index.html

@@ -51,12 +51,12 @@
 		
 		<script type="text/template" id="tpl_search">
 			<% for (var i in items){%>
-				<div style="margin-left:10px;border-bottom:1px solid #ddd;height:35px;line-height:35px;">
+				<div _index="<%=i%>" style="margin-left:10px;border-bottom:1px solid #ddd;height:35px;line-height:35px;">
-					<i class="fa fa-search" style="color:#ccc;font-size:15px;"></i>
+					<i _index="<%=i%>" class="fa fa-search" style="color:#ccc;font-size:15px;"></i>
-					<span style="font-size:14px;margin-left:4px;">
+					<span _index="<%=i%>" style="font-size:14px;margin-left:4px;">
 						<%=items[i].router%>
 					</span>
-					<span style="font-size:12px; margin-left:4px;color:#999;">
+					<span _index="<%=i%>" style="font-size:12px; margin-left:4px;color:#999;">
 						<%=items[i].desc%>
 					</span>
 				</div>
@@ -95,11 +95,11 @@
 				</div>
 				<div>分享</div>
 			</div>
-			<div class="sh tools_items">
+			<div class="sh tools_items" onclick="(function(){location.reload();return false;})()">
 				<div>
 					<i class="fa fa-refresh" style="color:#999999;"></i>
 				</div>
-				<div onclick="(function(){location.reload();return false;})()">刷新</div>
+				<div>刷新</div>
 			</div>
 		</div>
 		<!--仪表盘-->

meitu/js/common/data.js

@@ -37,7 +37,7 @@ define('common/data', function() {
 		content: '扬州'
 	}]);
 
-	window.routes2 = [{
+	data.router.push([{
 		x: 121.406822,
 		y: 31.28794,
 		content: '上海',
@@ -54,7 +54,7 @@ define('common/data', function() {
 		x: 119.932251,
 		y: 31.858897,
 		content: '常州'
-	}];
+	}]);
 
 	data.router.push([{
 		x: 121.433945,

meitu/js/home/driving.js

@@ -0,0 +1,47 @@
+
+
+define('home/driving', function(){
+	
+	function driving(origin, destination){
+		var driving = new AMap.Driving({
+			extensions: 'base',
+			policy: AMap.DrivingPolicy.REAL_TRAFFIC 
+		});
+		driving.search(origin, destination, function(status, result){
+			if(status === 'complete' && result.info === 'OK'){
+	        		//绘制驾车路线
+	        		map.setZoom(9);
+	        		var polyline = new AMap.Polyline({
+	        			map: map,
+	        			strokeColor: '#E30078',
+	        			strokeWeight: 5
+	        		});
+	        		var paths = [];
+	        		if(result.routes.length){
+	        			var route = result.routes[0];
+	        			var steps = route.steps;
+	        			var time = 0;
+	        			var distance = 0;
+	        			for(var i = 0; i < steps.length; i++){
+	        				var path = steps[i].path;
+	        				time += steps[i].time;
+	        				distance += steps[i].distance;
+	        				for(var j in path){
+	        					paths.push(path[j]);
+	        				}
+	        			}
+	        			
+	        			disTime.push({
+	        				time: Math.ceil(time/60),
+	        				distance: (distance/1000).toFixed(2),
+	        				speed: ((distance/1000) / (time/60/60)).toFixed(2)
+	        			});
+	        			
+	        		}
+	        		polyline.setPath(paths);
+	        		
+	        	}
+		});
+	}
+	return driving;
+});

meitu/js/home/events.js

@@ -0,0 +1,140 @@
+
+//全局事件
+define('home/events', function(require, exports, module){
+	var Events = require('lib/events');
+	//全局事件对象
+	var events = new Events();
+	//地图
+	var map = require('home/map');
+	//获取路线数据
+	var router = require('common/data').router[0];
+	//地图对象
+	events.set('map', map);
+	//默认路线
+	events.set('router', router);
+	//起点
+	events.set('origin', new AMap.LngLat(router[0].x, router[0].y));
+	//终点
+	events.set('destination', new AMap.LngLat(router[router.length - 1].x, router[router.length - 1].y));
+	//途经点
+	events.set('wayPoints', []);
+	//采集数据
+	events.set('disTime', []);
+	
+	//获取途经点
+	events.on('getWayPoints', function(){
+		var router = events.get('router');
+		var wayPoints = {
+			points: [],
+			contents: []
+		};
+		for(var i in router){
+			if(i > 0 && i < router.length - 1){
+				wayPoints.points.push(new AMap.LngLat(router[i].x, router[i].y));
+				wayPoints.contents.push(router[i].content);	
+			}
+		}
+		events.set('wayPoints', wayPoints);
+	});
+	
+	//绘制线路
+	events.on('drawRouter', function(){
+		var wayPoints = events.get('wayPoints');
+		var router = events.get('router');
+		var map = events.get('map');
+		//绘制途径点marker
+		for(var i in wayPoints.points){
+			var content = '<div index=' + i + ' style="background-color:#22BBFF;color:#fff;width:40px;height:20px';
+			content += ';text-align:center;line-height:20px;">' + wayPoints.contents[i] + '</div>';
+			var marker = new AMap.Marker({map: map, position: wayPoints.points[i], content: content});
+		}
+		
+		//绘制各段路程
+		AMap.service(['AMap.Driving'], function(){
+			for(var k = 0; k < router.length - 1; k++){
+				var sp = new AMap.LngLat(router[k].x, router[k].y);
+				var ep = new AMap.LngLat(router[k + 1].x, router[k + 1].y);
+				driving(sp, ep);
+			}
+		});
+	});
+	
+	//绘制起点和终点
+	events.on('drawOriginDestination', function(){
+		var map = events.get('map');
+		var origin = events.get('origin');
+		var destination = events.get('destination');
+		
+		var aIcon = new AMap.Icon({
+			image: "http://cache.amap.com/lbs/static/jsdemo002.png",
+			size:new AMap.Size(44,44),
+			imageOffset: new AMap.Pixel(-334, -180)
+		});
+		var bIcon = new AMap.Icon({
+			image: "http://cache.amap.com/lbs/static/jsdemo002.png",
+			size:new AMap.Size(44,44),
+			imageOffset: new AMap.Pixel(-334, -134)
+		});
+		
+		new AMap.Marker({map: map, position: origin, icon: aIcon});
+		new AMap.Marker({map: map, position: destination, icon: bIcon});
+	});
+	
+	
+	
+	//默认操作
+	events.trigger('drawOriginDestination');
+	events.trigger('getWayPoints');
+	events.trigger('drawRouter');
+	
+	setTimeout(function(){
+		console.log(events.get('disTime'));
+	}, 2000);
+	
+	//绘制两点间路线
+	function driving(origin, destination){
+		var map = events.get('map');
+		var driving = new AMap.Driving({
+			extensions: 'base',
+			policy: AMap.DrivingPolicy.REAL_TRAFFIC 
+		});
+		driving.search(origin, destination, function(status, result){
+			if(status === 'complete' && result.info === 'OK'){
+	        		//绘制驾车路线
+	        		map.setZoom(9);
+	        		var polyline = new AMap.Polyline({
+	        			map: map,
+	        			strokeColor: '#E30078',
+	        			strokeWeight: 3
+	        		});
+	        		var paths = [];
+	        		if(result.routes.length){
+	        			var route = result.routes[0];
+	        			var steps = route.steps;
+	        			var time = 0;
+	        			var distance = 0;
+	        			for(var i = 0; i < steps.length; i++){
+	        				var path = steps[i].path;
+	        				time += steps[i].time;
+	        				distance += steps[i].distance;
+	        				for(var j in path){
+	        					paths.push(path[j]);
+	        				}
+	        			}
+	        			
+	        			var disTime = events.get('disTime');
+	        			disTime.push({
+	        				time: Math.ceil(time/60),
+	        				distance: (distance/1000).toFixed(2),
+	        				speed: ((distance/1000) / (time/60/60)).toFixed(2)
+	        			});
+	        			events.set('disTime', disTime);
+	        			
+	        		}
+	        		polyline.setPath(paths);
+	        		
+	        	}
+		});
+	}
+	
+});

meitu/js/home/info.js

@@ -44,9 +44,29 @@ define('home/info', function (require, exports, module) {
   wrapperContent.on('touchstart', function (e) {
     startX = e.changedTouches[0].clientX;
   });
+  
+  wrapperContent.on('touchend', endTouch);
 
-  wrapperContent.on('touchend', function (e) {
+  //隐藏和显示
-    var dis = e.changedTouches[0].clientX - startX;
+  var SN_info_btn = $('#SN_info_btn');
+  var SN_info = $('.SN_info');
+  var SN_info_item = $('.SN_info_item');
+
+  SN_info_btn.on('click', function(){
+      if(parseInt(SN_info.css('height')) > 100){
+        SN_info.css('height', '25px');
+        $('.SN_info_btn_icon').css('fontSize', '20px');
+        SN_info_item.hide();
+      }else{
+        SN_info.css('height', '130px');
+        SN_info_item.show();
+        $('.SN_info_btn_icon').css('fontSize', '17px');
+      }
+  });
+
+
+	function endTouch(e){
+  		var dis = e.changedTouches[0].clientX - startX;
     //获取当前translate3d的位置
     var transform = wrapperContent.css('transform') || wrapperContent.css('-webkit-transform');
     var currentPos = parseInt(transform.split(',')[0].split('(')[1]);
@@ -84,26 +104,7 @@ define('home/info', function (require, exports, module) {
         }, 30);
       }
     }
-  });
+  }
-
-
-  //隐藏和显示
-  var SN_info_btn = $('#SN_info_btn');
-  var SN_info = $('.SN_info');
-  var SN_info_item = $('.SN_info_item');
-
-  SN_info_btn.on('click', function(){
-      if(parseInt(SN_info.css('height')) > 100){
-        SN_info.css('height', '25px');
-        $('.SN_info_btn_icon').css('fontSize', '20px');
-        SN_info_item.hide();
-      }else{
-        SN_info.css('height', '130px');
-        SN_info_item.show();
-        $('.SN_info_btn_icon').css('fontSize', '17px');
-      }
-  });
-
 
 
 });

meitu/js/home/map.js

@@ -1,39 +1,12 @@
 
-/*地图相关的基础数据*/
 define('home/map', function(require, exports, module){
-	
+
-	//获取路线数据
-	var router = require('common/data').router;
-	
 	//初始化地图
 	var map = new AMap.Map('map', {
 		mapStyle: 'fresh',
 		resizeEnable: true,
 	});
 	
-	//途经点
+	return map;
-	var wayPoints = [];
-	//起点
-	var origin = null;
-	//终点
-	var destination = null;
-	//默认路线
-	var routes = router[0];
-	
-	//
-	var hasRoutes = false;
-	
-	//
-	var contents = [];
-
-	return {
-		map: map,
-		wayPointer: wayPoints,
-		origin: origin,
-		destination: destination,
-		routes: routes,
-		hasRoutes: hasRoutes,
-		contents: contents
-	}
 
 });

meitu/js/home/search.js

@@ -1,6 +1,12 @@
 
 define('home/search', function(require, exports, module){
+	
 	var $ = require('lib/zepto_pj');
+	var map = require('home/map');
+
+	var router = require('common/data').router;
+	var events = require('lib/events');
+	
 	var input = $('#search_input_text');
 	var tpl = $('#tpl_search').html();
 	var container = $('#SEARCH_TPL');
@@ -35,6 +41,21 @@ define('home/search', function(require, exports, module){
 		container.fadeIn();
 	});
 	
+	//选择list列表
+	container.on('click', function(e){
+		var el = $(e.target);
+		var index = el.attr('_index');
+		map.routes = router[index];
+		
+		
+		//路线出现在输入框
+		input.val(data.items[index].router);
+		//隐藏结果列表
+		container.fadeOut();
+		//触发搜索事件
+		
+	});
+	
 	
 	
 });

meitu/js/lib/events.js

@@ -1,6 +1,15 @@
 define('lib/events', function (require, exports, module) {
     var eventSplitter = /\s+/;
     function Events() {}
+    
+    Events.prototype.set = function(key, value){
+    		this[key] = value;
+    };
+    
+    Events.prototype.get = function(key){
+    		return this[key];
+    };
+    
     Events.prototype.on = function (events, callback, context) {
         var cache, event, list;
         if (!callback) return this;

meitu/js/main.js

@@ -7,12 +7,13 @@ requirejs([
 		'lib/fastclick',
 		'lib/underscore',
 		'home/map',
+		'home/events',
 		'home/dashboard',
 		'home/router',
 		'home/info',
 		'home/tools',
 		'home/search'
 	], 
-	function(fastclick,underscore, map, router) {
+	function(fastclick) {
 		fastclick(document.body);
 });