mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add AMap router
This commit is contained in:
@@ -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,
|
||||
|
||||
@@ -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;
|
||||
});
|
||||
@@ -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);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
+23
-22
@@ -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');
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
+2
-29
@@ -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,
|
||||
});
|
||||
|
||||
//途经点
|
||||
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
|
||||
}
|
||||
return map;
|
||||
|
||||
});
|
||||
@@ -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();
|
||||
//触发搜索事件
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
@@ -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;
|
||||
|
||||
Vendored
-12
File diff suppressed because one or more lines are too long
Vendored
-10
File diff suppressed because one or more lines are too long
+2
-1
@@ -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);
|
||||
});
|
||||
Reference in New Issue
Block a user