From fd449a37edbb1b7fa0b1f1a67499de0263a46d59 Mon Sep 17 00:00:00 2001 From: lh_wang Date: Mon, 10 Aug 2015 00:32:24 +0800 Subject: [PATCH] add search method --- meitu/css/main.css | 21 +++----- meitu/index.html | 28 +++++------ meitu/js/common/data.js | 19 +++++++ meitu/js/home/events.js | 97 ++++++++++++++++++++++++------------ meitu/js/home/map.js | 2 +- meitu/js/home/router.js | 27 ++++++---- meitu/js/home/search.js | 108 +++++++++++++++++++++++++++++++++++----- meitu/js/main.js | 2 - 8 files changed, 217 insertions(+), 87 deletions(-) diff --git a/meitu/css/main.css b/meitu/css/main.css index 86ef2a5..b01bbac 100644 --- a/meitu/css/main.css +++ b/meitu/css/main.css @@ -231,20 +231,12 @@ html body { width: 100%; height: 70px; } -.speed_data>div { - height: 20px; -} + .speed_title_strong { color: #0091FF; font-size: 15px; - /*font-style: italic;*/ -} -.speed_l { - margin-left:5px; -} -.speed_r { - width: 100px; } + /*-----------------router----------------------------**/ .router { @@ -254,10 +246,11 @@ html body { width: 45px; min-height: 190px; background-color: #fff; - opacity: 0.8; - -webkit-opacity:0.8; - -moz-opacity: 0.8; - -moz-opacity: 0.8; + opacity: 0.9; + -webkit-opacity:0.9; + -moz-opacity: 0.9; + -moz-opacity: 0.9; + display:none; } #router_canvas { -webkit-transform: translateZ(0); diff --git a/meitu/index.html b/meitu/index.html index 86eeef0..aa39034 100644 --- a/meitu/index.html +++ b/meitu/index.html @@ -121,41 +121,37 @@
-
+
-
+
时速: 计算
-
+
时长: 计算
-
-
-
- 到达: - 计算 -
+
+
+ 到达: + 计算
-
+
距离: 计算
-
-
- 模拟车速:50,000 km/h -
+
+ 模拟车速:50,000 km/h
-
-
+
+
获取中 diff --git a/meitu/js/common/data.js b/meitu/js/common/data.js index b776f38..c5fc4ed 100644 --- a/meitu/js/common/data.js +++ b/meitu/js/common/data.js @@ -79,6 +79,25 @@ define('common/data', function() { content: '衢州' }]); + data.router.push([ + { + x: 113.643436, + y: 34.766435, + content: '郑州', + startTime: '7:00' + }, + { + x: 117.296723, + y: 36.784095, + content: '济南' + }, + { + x: 120.362091, + y: 36.060201, + content: '青岛' + } + ]); + //链接 data.urls = [ 'http://m.ctrip.com/webapp/you/appshare/bargain/18484.html?from=http%3A%2F%2Fm.ctrip.com%2Fwebapp%2Fyou%2Fplace%2F12.html', diff --git a/meitu/js/home/events.js b/meitu/js/home/events.js index 9a48a67..507f6e5 100644 --- a/meitu/js/home/events.js +++ b/meitu/js/home/events.js @@ -1,6 +1,7 @@ //全局事件 define('home/events', function(require, exports, module) { var $ = require('lib/zepto_pj'); + var rt = require('home/router'); var Events = require('lib/events'); //全局事件对象 var events = new Events(); @@ -8,26 +9,65 @@ define('home/events', function(require, exports, module) { 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.set('allPoints', []); - //汽车点 - events.set('carMarker', null); - //实时车的位置 - events.set('realCarIndex', 0); - //仪表盘车速 - events.set('dashSpeed', 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.set('allPoints', []); + // //汽车点 + // events.set('carMarker', null); + // //实时车的位置 + // events.set('realCarIndex', 0); + // //仪表盘车速 + // events.set('dashSpeed', 0); + // //计时器 + // events.set('realSpeedHandle', null); + // events.set('carWatchHandle', null); + + events.on('mapRefresh', function(){ + map.clearMap(); + if(events.get('carWatchHandle')){ + clearInterval(events.get('carWatchHandle')); + } + if(events.get('realSpeedHandle')){ + clearInterval(events.get('realSpeedHandle')); + } + //查看用户是否设置router + var rt = events.get('router') || router; + //地图对象 + events.set('map', map); + //默认路线 + events.set('router', rt); + //起点 + events.set('origin', new AMap.LngLat(rt[0].x, rt[0].y)); + //终点 + events.set('destination', new AMap.LngLat(rt[rt.length - 1].x, rt[rt.length - 1].y)); + //途经点 + events.set('wayPoints', []); + //采集数据 + events.set('disTime', []); + //所有点集合 + events.set('allPoints', []); + //汽车点 + events.set('carMarker', null); + //实时车的位置 + events.set('realCarIndex', 0); + //仪表盘车速 + events.set('dashSpeed', 0); + //计时器 + events.set('realSpeedHandle', null); + events.set('carWatchHandle', null); + }); + //获取途经点 events.on('getWayPoints', function() { @@ -42,6 +82,8 @@ define('home/events', function(require, exports, module) { wayPoints.contents.push(router[i].content); } } + rt.set('router', events.get('router')); + rt.trigger('show'); events.set('wayPoints', wayPoints); }); @@ -160,7 +202,7 @@ define('home/events', function(require, exports, module) { $('#router_circle_0').css('background-color', '#ccc'); $('#router_circle_1').css('background-color', 'red'); $('#router_circle_1').addClass('firebug_flash'); - var carWatch = setInterval(function() { + var carWatchHandle = setInterval(function() { if (!carMarker) { return; } @@ -188,6 +230,7 @@ define('home/events', function(require, exports, module) { } }, 500); + events.set('carWatchHandle', carWatchHandle); }); events.on('getWeather', function(){ @@ -242,19 +285,9 @@ define('home/events', function(require, exports, module) { } } }, 1000); + events.set('realSpeedHandle', realSpeedHandle); }); - - - //默认操作 - events.trigger('drawOriginDestination'); - events.trigger('getWayPoints'); - events.trigger('drawRouter'); - events.trigger('carRun'); - events.trigger('calcuSpeed'); - events.trigger('getWeather'); - - //绘制两点间路线 function driving(origin, destination) { var map = events.get('map'); diff --git a/meitu/js/home/map.js b/meitu/js/home/map.js index 78bad52..d5fc06a 100644 --- a/meitu/js/home/map.js +++ b/meitu/js/home/map.js @@ -6,7 +6,7 @@ define('home/map', function(require, exports, module){ mapStyle: 'fresh', resizeEnable: true, }); - + map.setZoom(10); return map; }); \ No newline at end of file diff --git a/meitu/js/home/router.js b/meitu/js/home/router.js index 71217d8..647fa9f 100644 --- a/meitu/js/home/router.js +++ b/meitu/js/home/router.js @@ -2,16 +2,23 @@ define('home/router', function(require, exports, module) { var $ = require('lib/zepto'); - var router = require('common/data').router[0]; - var wrapper = $('#ROUTER_TPL'); - var tpl = $('#tpl_router').html(); - - var data = { - items: router - }; - - var html = _.template(tpl)(data); - wrapper.html(html); + var Events = require('lib/events'); + var router = new Events(); + router.on('show', function(){ + $('.router').show(); + var rt = router.get('router'); + var wrapper = $('#ROUTER_TPL'); + var tpl = $('#tpl_router').html(); + + var data = { + items: rt + }; + + var html = _.template(tpl)(data); + wrapper.html(html); + }); + + return router; }); \ No newline at end of file diff --git a/meitu/js/home/search.js b/meitu/js/home/search.js index 2e66085..0db5a77 100644 --- a/meitu/js/home/search.js +++ b/meitu/js/home/search.js @@ -3,15 +3,14 @@ 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 events = require('home/events'); + var routers = require('common/data').router; var input = $('#search_input_text'); + var btn = $('.search_btn'); + var tpl = $('#tpl_search').html(); var container = $('#SEARCH_TPL'); - var data = { items:[ { @@ -45,17 +44,102 @@ define('home/search', function(require, exports, module){ 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(); - //触发搜索事件 + container.fadeOut(); + + //搜索 + //路径规划 + events.set('router', routers[index]); + events.trigger('mapRefresh'); + events.trigger('drawOriginDestination'); + events.trigger('getWayPoints'); + events.trigger('drawRouter'); + events.trigger('carRun'); + events.trigger('calcuSpeed'); + events.trigger('getWeather'); + }); + + + btn.on('click', function(){ + var val = input.val(); + for(var i in data.items){ + if(data.items[i].router === val){ + return; + } + } + //格式过滤 + if(val.split('到').length !== 2){ + return; + } + var sName = val.split('到')[0]; + var eName = val.split('到')[1]; + //进行两点搜索,获取两点经纬度 + AMap.service(["AMap.Geocoder"], function() { + var geocoder = new AMap.Geocoder({ + radius: 1000, + extensions: 'base' + }); + geocoder.getLocation(sName, function(status, result){ + if(status === 'error') { + console.log('服务请求出错'); + } + if(status === 'no_data') { + console.log('无数据返回，请换个关键字试试～～'); + } + else { + var geocodes = result.geocodes; + if(geocodes.length && result.info === 'OK'){ + var sLoc = geocodes[0].location; + //解析第二个点 + geocoder.getLocation(eName, function(eStatus, eResult){ + if(eStatus === 'error') { + console.log('服务请求出错'); + } + if(eStatus === 'no_data') { + console.log('无数据返回，请换个关键字试试～～'); + } + else { + var eGeocodes = eResult.geocodes; + if(eGeocodes.length && eResult.info === 'OK'){ + var eLoc = eGeocodes[0].location; + var seRouter = [ + { + x: sLoc.lng, + y: sLoc.lat, + startTime: '6:00', + content: sName + }, + { + x: eLoc.lng, + y: eLoc.lat, + content: eName + } + ]; + //规划路线 + container.fadeOut(); + events.set('router', seRouter); + events.trigger('mapRefresh'); + events.trigger('drawOriginDestination'); + events.trigger('getWayPoints'); + events.trigger('drawRouter'); + events.trigger('carRun'); + events.trigger('calcuSpeed'); + events.trigger('getWeather'); + + } + } + + + }); + } + } + }); + + }); + }); - - }); \ No newline at end of file diff --git a/meitu/js/main.js b/meitu/js/main.js index c5f540d..b83353b 100644 --- a/meitu/js/main.js +++ b/meitu/js/main.js @@ -7,9 +7,7 @@ requirejs([ 'lib/fastclick', 'lib/underscore', 'home/map', - 'home/events', 'home/dashboard', - 'home/router', 'home/info', 'home/tools', 'home/search'