;(function(window, $){ //显示地图 var map = new AMap.Map('map',{ mapStyle: 'fresh', resizeEnable: true, }); //搜索 var wayPoints = []; var origin = null; var destination = null; var routes = window.routes1; var hasRoutes = false; var contents = []; $('#search_router').on('focus', function(){ $('.search_list').fadeIn(); }); $('.search_list').on('click', function(e){ var el = $(e.target); var index = el.attr('_index'); routes = window['routes' + index]; $('#search_router').val(el.text()); $('.search_list').fadeOut(); }); $('.search_btn').on('click', function(e){ map.clearMap(); map.setZoom(13); $('.timeline').empty(); if(origin){ map.panTo(origin); } if(timelineIn){ clearInterval(timelineIn); } if(disTime){ disTime = []; } if(timelineIndex){ timelineIndex = 0; } if(carHandle){ clearInterval(carHandle); carHandle = null; } $('.timeline_pannel').css('visibility', 'visible'); doTimeline(); hasRoutes = true; AMap.service(['AMap.Driving'], function(){ origin = new AMap.LngLat(routes[0].x, routes[0].y); destination = new AMap.LngLat(routes[routes.length - 1].x, routes[routes.length - 1].y); //绘制起终点icon addSEIcon(origin, destination); //驾车路线导航 contents = []; wayPoints = []; for(var n = 1; n < routes.length - 1; n++){ wayPoints.push(new AMap.LngLat(routes[n].x, routes[n].y)); contents.push(routes[n].content); } //绘制中途点 addWayIcon(wayPoints, contents); //绘制各段路程 for(var k = 0; k < routes.length - 1; k++){ var sp = new AMap.LngLat(routes[k].x, routes[k].y); var ep = new AMap.LngLat(routes[k + 1].x, routes[k + 1].y); driving(sp, ep); } }); }); //绘制起终点ICON function addSEIcon(origin, 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}); } var markers = []; //绘制中途点ICON function addWayIcon(wayPoints, contents){ markers = []; for(var i in wayPoints){ var content = '
' + contents[i] + '
'; var marker = new AMap.Marker({map: map, position: wayPoints[i], content: content}); marker.__index = i; markers.push(marker); AMap.event.addListener(marker, 'click', function(e){ var index = e.target.__index; var cn = parseInt(index); var arTime = getTime(index); var infoWindow = new AMap.InfoWindow({ position: markers[cn].getPosition(), isCustom: true, offset:new AMap.Pixel(20, -35), content:strHTML(routes[cn].content,routes[cn + 1].content,arTime,disTime[index].time,disTime[index].distance,disTime[index].speed) }); infoWindow.open(map); //TODO: 4 BEST METHOD IN CALLBACK setTimeout(function(){ $('._in_close').on('click', function(){ infoWindow.close(); }); }, 1000); }); } } var disTime = []; //模拟车真实速度 //驾车路线导航 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); } }); } var carMarker = null; var carMarkerTag = 0; $('#_alert_close').on('click', function(){ $('#_alert').fadeOut(); $('.add_mask').fadeOut(); }); $('.car_run_show').on('click', function(){ if(!hasRoutes){ $('.add_mask').fadeIn(); $('#_alert').fadeIn(); return; } doSpeed(); origin = new AMap.LngLat(routes[0].x, routes[0].y); destination = new AMap.LngLat(routes[routes.length - 1].x, routes[routes.length - 1].y); var Car = new AMap.Icon({ image: "img/car.png", size:new AMap.Size(100,100) }); carMarker = new AMap.Marker({ map: map, position: origin, icon: Car, autoRotation: true, offset:new AMap.Pixel(-26,-13), zIndex: 10000, }); AMap.service(['AMap.Driving'], function(){ var driving = new AMap.Driving({ extensions: 'base', policy: AMap.DrivingPolicy.REAL_TRAFFIC }); driving.search(origin, destination, {waypoints: wayPoints},function(status, result){ if(status === 'complete' && result.info === 'OK'){ //绘制驾车路线 var paths = []; if(result.routes.length){ var route = result.routes[0]; var steps = route.steps; for(var i = 0; i < steps.length; i++){ var path = steps[i].path; for(var j in path){ paths.push(path[j]); } } } carMarker.moveAlong(paths, 500 * 1000); } }); }); //开启小车监控 runCar(); }); //开启、关闭弹幕 var tag = 0; $('.danmu').on('click', function(){ if(tag % 2 === 0){ $('#tanmu_div').css('visibility', 'visible'); }else{ $('#tanmu_div').css('visibility', 'hidden'); } tag ++; }); //获取小车的位置 //获取index var realCarIndex = 0; var timelineIndex = 0; var carHandle = null; function runCar(){ timelineIndex = 0; carHandle = setInterval(function(){ if(!carMarker){ return; } var carPos = carMarker.getPosition(); //设置地图级别和跟踪 map.setZoom(12); map.panTo(carPos); for(var i in routes){ if(i < (routes.length) && i > 0 && Math.abs(carPos.lng - routes[i].x) < 0.001 && Math.abs(carPos.lat - routes[i].y) < 0.001){ var index = parseInt(i-1); timelineIndex = parseInt(i); realCarIndex = index; var arTime = getTime(index); var infoWindow = new AMap.InfoWindow({ position: carPos, isCustom: true, offset:new AMap.Pixel(50, -50), content:strHTML(routes[index].content,routes[parseInt(i)].content,arTime,disTime[index].time,disTime[index].distance,disTime[index].speed) }); infoWindow.open(map); setTimeout(function(){ $('._in_close').on('click', function(){ infoWindow.close(); }); }, 1000); if(index < markers.length){ //将marker设置成绿色 var content = '
' + contents[index] + '
'; markers[index].setContent(content); } if(index < markers.length - 1){ var oldStr = markers[index + 1].getContent(); //将marker设置成红色 var html = '
' + contents[index + 1] + '
'; if(oldStr !== html){ markers[index + 1].setContent(html); } } } if(Math.abs(carPos.lng - routes[routes.length-1].x) < 0.01 && Math.abs(carPos.lat - routes[routes.length-1].y) < 0.01){ clearInterval(carHandle); clearInterval(realSpeedHandle); } } }, 100); } function strHTML(contentA, contentB, arTime, time, distance, speed){ var styles = ''; var picIndex =Math.floor(Math.random()*5); var contentHTML = styles + '
'; contentHTML += '
'; contentHTML += '
'; contentHTML += '' + contentA + ''; contentHTML += ''; contentHTML += '' + contentB + '
'; contentHTML += '
'; contentHTML += '到达时间:' + arTime + ''; contentHTML += '
时长:'; contentHTML += '' + time + ' 分钟
'; contentHTML += '
距离:'; contentHTML += '' + distance + ' km'; contentHTML += '
'; contentHTML += '
'; contentHTML += '时速:'; contentHTML += '' + speed + ' km/h'; contentHTML += '
'; contentHTML += '
'; contentHTML += '
'; contentHTML += '
'; contentHTML += '
那座城市,那个人, 特价¥899
'; contentHTML += '
再美不如苏州园林, 门票:¥40
'; contentHTML += '
苏州好吃一窝,特价团购:¥30
'; contentHTML += '
苏州必须去的5个景点,去了才知道
'; contentHTML += '
假日酒店,全家人旅行特选,机场接送
'; contentHTML += '
'; return contentHTML; } function getTime(index){ var endTime = 0; var startTime = parseInt(routes[0].startTime.split(':')[1]); for(var n = index; n >= 0; n--){ endTime += disTime[n].time; } endTime += startTime; //进行时间换算 var min = endTime % 60; //分钟 var hour = Math.floor(endTime/60);//小时 var arTime = parseInt(routes[0].startTime.split(':')[0]) + hour; if(arTime > 23){ arTime = arTime - 24; //次日 arTime = '次日 ' + arTime; } if(min < 10){ min = '0' + min; } arTime += ':' + min; return arTime; } //获取路上所花时间 function getHour(index){ var endTime = 0; for(var n = index; n >= 0; n--){ endTime += disTime[n].time; } return Math.floor(endTime/60) + '小时' + Math.ceil(endTime%60) + '分钟'; } //获取所有距离 function getAllDistance(){ var dis = 0; for(var i in disTime){ dis += parseInt(disTime[i].distance); } return dis; } //仪表盘功能 var myChart = echarts.init(document.getElementById('charts')); var option = { backgroundColor:'#fff', series : [ { min:0, max:80, name:'业务指标', type:'gauge', detail : { textStyle:{ fontSize:18, color:'#E82D00' } }, data:[{value: 50, name: 'km/h'}], axisLine: { lineStyle: { width: 10 } }, splitLine: { length :15, lineStyle: { color: 'auto', width:1 } }, title : { textStyle: { fontWeight: 'bolder', fontSize: 12, fontStyle: 'italic' } }, }, ] }; option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0; myChart.setOption(option, true); //计算时速 var realSpeedHandle = null; function doSpeed(){ $('#real_time').text(getTime(disTime.length - 1)); $('#real_distime').text(getHour(disTime.length - 1)); $('#real_distance').text(getAllDistance() + 'km'); realSpeedHandle = setInterval(function(){ if(disTime[realCarIndex]){ var speed = (disTime[realCarIndex].speed - Math.random()*5).toFixed(2); option.series[0].data[0].value = speed; myChart.setOption(option, true); $('#real_speed').text(speed + 'km/h'); } }, 1000); } //时间轴 var timelineIn = null; function doTimeline(){ for(var i in routes){ var item = '
' + routes[i].content + '
'; $('.timeline').append(item); } timelineIn = setInterval(function(){ if(disTime[timelineIndex]){ $('#timeline_' + timelineIndex).removeClass('firebug_flash'); $('#timeline_' + timelineIndex).css('backgroundColor', '#989693'); $('#timeline_' + (timelineIndex + 1)).addClass('firebug_flash').css('backgroundColor', '#DE007D'); } }, 1000); } AMap.service(['AMap.Weather'], function(){ var we = new AMap.Weather(); we.getLive(routes[routes.length - 1].content, function(err, status){ $('#tem_yin').text(status.weather); $('#tem_du').text(status.temperature + '℃'); $('#tem_feng').text(status.windDirection + '风'); }); }); //开启、关闭弹幕 var tou_tag = 0; $('.toupiao').on('click', function(){ if(tou_tag % 2 === 0){ $('#toupiao_frame').fadeIn(); }else{ $('#toupiao_frame').fadeOut(); } tou_tag ++; }); })(window, $);