mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add socket.io
This commit is contained in:
lh_wang
@@ -0,0 +1,37 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<projectDescription>
|
||||
<name>lvtu</name>
|
||||
<comment>Create By HBuilder</comment>
|
||||
<projects>
|
||||
</projects>
|
||||
<buildSpec>
|
||||
<buildCommand>
|
||||
<name>com.aptana.ide.core.unifiedBuilder</name>
|
||||
<arguments>
|
||||
</arguments>
|
||||
</buildCommand>
|
||||
</buildSpec>
|
||||
<natures>
|
||||
<nature>com.aptana.projects.webnature</nature>
|
||||
</natures>
|
||||
<filteredResources>
|
||||
<filter>
|
||||
<id>1438149018036</id>
|
||||
<name></name>
|
||||
<type>10</type>
|
||||
<matcher>
|
||||
<id>org.eclipse.ui.ide.orFilterMatcher</id>
|
||||
<arguments>
|
||||
<matcher>
|
||||
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||
<arguments>1.0-projectRelativePath-matches-false-false-bin</arguments>
|
||||
</matcher>
|
||||
<matcher>
|
||||
<id>org.eclipse.ui.ide.multiFilter</id>
|
||||
<arguments>1.0-projectRelativePath-matches-false-false-setting</arguments>
|
||||
</matcher>
|
||||
</arguments>
|
||||
</matcher>
|
||||
</filter>
|
||||
</filteredResources>
|
||||
</projectDescription>
|
||||
@@ -0,0 +1,142 @@
|
||||
body{
|
||||
margin:0;
|
||||
height:100%;
|
||||
width:100%;
|
||||
position:absolute;
|
||||
}
|
||||
#map{
|
||||
position: absolute;
|
||||
top:0;
|
||||
left: 0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
}
|
||||
.header{
|
||||
position: absolute;
|
||||
width:100%;
|
||||
height:40px;
|
||||
background-color:#FAFBFB;
|
||||
border:1px solid #ddd;
|
||||
}
|
||||
.menu{
|
||||
width:33%;
|
||||
height:40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
font-size: 0.9375rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.header_menu{
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
right: 0;
|
||||
height:40px;
|
||||
}
|
||||
|
||||
|
||||
.header_logo{
|
||||
width:100px;
|
||||
border-right: 1px dashed #ddd;
|
||||
}
|
||||
|
||||
.header_logo img{
|
||||
margin-top:5px;
|
||||
}
|
||||
|
||||
.logo{
|
||||
width:60px;
|
||||
margin-top:6px;
|
||||
text-align:center;
|
||||
line-height:12px;
|
||||
}
|
||||
|
||||
.fl{
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fr{
|
||||
float: right;
|
||||
}
|
||||
.logo_title{
|
||||
font-size:12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo_url{
|
||||
font-size:12px;
|
||||
color:#4E4D4C;
|
||||
}
|
||||
|
||||
.active{
|
||||
color: #55A9FD;
|
||||
}
|
||||
|
||||
.search{
|
||||
width:100%;
|
||||
height:45px;
|
||||
position: absolute;
|
||||
top:42px;
|
||||
background-color: #FAFBFB;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.search input{
|
||||
height:30px;
|
||||
outline: none;
|
||||
border:1px solid #ddd;
|
||||
padding-left:5px;
|
||||
margin-top:3px;
|
||||
width: 100%;
|
||||
font-size:16px;
|
||||
-webkit-tap-highlight-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.search_btn{
|
||||
width: 52px;
|
||||
height:35px;
|
||||
margin-top:3px;
|
||||
text-align:center;
|
||||
line-height:35px;
|
||||
color:#fff;
|
||||
background-color:#0091FF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.input_div{
|
||||
position: absolute;
|
||||
left: 4px;
|
||||
right:60px;
|
||||
}
|
||||
|
||||
.toolbar{
|
||||
position:absolute;
|
||||
right:10px;
|
||||
width:60px;
|
||||
height:140px;
|
||||
top: 100px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.car_run{
|
||||
width:50px;
|
||||
height:50px;
|
||||
background-color:#0091FF;
|
||||
color:#FFF;
|
||||
text-align:center;
|
||||
line-height:50px;
|
||||
border-radius:25px;
|
||||
margin-top:10px;
|
||||
margin-left:5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="format-detection" content="telephone=no" searchtype="map">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,minimal-ui">
|
||||
<meta name="misapplication-tap-highlight" content="no"/>
|
||||
<title>美途</title>
|
||||
<link type="text/css" rel="stylesheet" href="css/main.css"/>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" ></div>
|
||||
<div class="header">
|
||||
<div class="header_logo fl">
|
||||
<div class="fl">
|
||||
<img src="img/logo.png"/>
|
||||
</div>
|
||||
<div class="fl logo">
|
||||
<span class="logo_title">美丽旅途</span>
|
||||
<span class="logo_url">ctrip.com</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header_menu fl">
|
||||
<div class="menu active">
|
||||
首页
|
||||
</div>
|
||||
<div class="menu">
|
||||
故事
|
||||
</div>
|
||||
<div class="menu">
|
||||
附近
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="fl input_div">
|
||||
<input placeholder="请输入旅游线路"/>
|
||||
</div>
|
||||
<div class="fr search_btn">
|
||||
<span>搜索</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<div class="car_run car_run_show">
|
||||
行
|
||||
</div>
|
||||
<div class="car_run danmu" style="background-color:#E82D00;">
|
||||
弹
|
||||
</div>
|
||||
</div>
|
||||
<div id="tanmu_div" style="visibility:hidden;border:0;position:absolute;left:0;right:0;height:234px;bottom:0;z-index:10000;box-sizing: border-box;background-color:#F6F6F6;">
|
||||
<iframe scrolling="no" style="width:100%;height:40px;border:0;opacity:0.5;" src="http://localhost:3000/"></iframe>
|
||||
<iframe scrolling="no" style="width:100%;height:192px;border:0;margin-top:-2px;" src="http://localhost:3000/emit"></iframe>
|
||||
</div>
|
||||
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=6a1180467b5f36714645d22044535ab7"></script>
|
||||
<script type="text/javascript" src="js/zepto.js"></script>
|
||||
<script type="text/javascript" src="js/data.js"></script>
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
;(function(window, $){
|
||||
|
||||
window.routes = [
|
||||
{
|
||||
x: 121.456604,
|
||||
y: 31.23394,
|
||||
content: '上海',
|
||||
startTime: '8:00'
|
||||
},
|
||||
{
|
||||
x: 121.14212,
|
||||
y: 31.264466,
|
||||
content: '苏州'
|
||||
},
|
||||
{
|
||||
x: 120.632629,
|
||||
y: 31.28794,
|
||||
content: '无锡'
|
||||
},
|
||||
{
|
||||
x: 120.2742,
|
||||
y: 31.582045,
|
||||
content: '常州'
|
||||
},
|
||||
{
|
||||
x: 119.943237,
|
||||
y: 31.771375,
|
||||
content: '丹阳'
|
||||
},
|
||||
{
|
||||
x: 119.409027,
|
||||
y: 32.196533,
|
||||
content: '镇江'
|
||||
},
|
||||
{
|
||||
x: 119.393921,
|
||||
y: 32.41011,
|
||||
content: '扬州'
|
||||
}
|
||||
];
|
||||
|
||||
})(window, $);
|
||||
@@ -0,0 +1,253 @@
|
||||
;(function(window, $){
|
||||
|
||||
//显示地图
|
||||
var map = new AMap.Map('map',{
|
||||
mapStyle: 'fresh',
|
||||
resizeEnable: true,
|
||||
});
|
||||
|
||||
//搜索
|
||||
var wayPoints = [];
|
||||
var origin = null;
|
||||
var destination = null;
|
||||
var routes = window.routes;
|
||||
$('.search_btn').on('click', function(e){
|
||||
map.clearMap();
|
||||
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);
|
||||
//驾车路线导航
|
||||
var 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){
|
||||
for(var i in wayPoints){
|
||||
var content = '<div index=' + i + ' style="background-color:#22BBFF;color:#fff;width:60px;height:26px';
|
||||
content += ';text-align:center;line-height:26px;">' + contents[i] + '</div>';
|
||||
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 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;
|
||||
|
||||
var styles = '<style type="text/css">';
|
||||
styles += ' ._in_bg{background-color:#FFF;width:320px;height:220px;border:1px solid #ddd;}';
|
||||
styles += ' ._in_title{margin-left:5px;width:310px;text-align: center;height:35px;line-height:35px;border-bottom:1px solid #DDDDDD;}';
|
||||
styles += ' ._in_title img{height:12px;margin-left:5px;margin-right:5px;margin-top:-4px;}';
|
||||
styles += ' ._in_title span{color:#1DC6F0;font-size:20px;}';
|
||||
styles += ' ._in_close{float: right;margin-top:3px;margin-right:3px;cursor:pointer;}';
|
||||
styles += ' ._in_key{font-size:13px;color: #0091FF;margin-left:5px;}';
|
||||
styles += ' ._in_key_value{color:#999999;font-size:13px;}';
|
||||
styles += ' ._in_key_val{color:#E60085;font-size:13px;}';
|
||||
styles += ' ._in_city_story img{height:80px;margin-right:5px;margin-top:3px;}';
|
||||
styles += ' ._in_story{font-size:13px;margin-left:5px;line-height:16px;margin-top:5px;}';
|
||||
styles += ' ._in_arrow_down{border:1px solid #ddd;width:12px;height:12px;background-color:#fff;margin-left:auto;margin-right:auto;';
|
||||
styles += 'transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);';
|
||||
styles += '-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);border-left:0;border-top:0;margin-top:3px;}';
|
||||
styles += '</style>';
|
||||
|
||||
var contentHTML = styles + '<div class="_in_bg">';
|
||||
contentHTML += '<div class="_in_close"><img src="img/iw-close.png" /></div>';
|
||||
contentHTML += '<div class="_in_title">';
|
||||
contentHTML += '<span>' + routes[cn].content + '</span>';
|
||||
contentHTML += '<img src="img/arrow.png"/>';
|
||||
contentHTML += '<span>' + routes[cn + 1].content + '</span></div>';
|
||||
contentHTML += '<div style="height:90px;"><div style="float:left"><div style="margin-top:4px;">';
|
||||
contentHTML += '<span class="_in_key">到达时间：</span><span class="_in_key_val">' + arTime + '</span>';
|
||||
contentHTML += '</div><div><span class="_in_key">时长：</span>';
|
||||
contentHTML += '<span class="_in_key_value">' + disTime[index].time + ' 分钟</span></div>';
|
||||
contentHTML += '<div><span class="_in_key">距离：</span>';
|
||||
contentHTML += '<span class="_in_key_value">' + disTime[index].distance + ' km</span>';
|
||||
contentHTML += '</div>';
|
||||
contentHTML += '<div>';
|
||||
contentHTML += '<span class="_in_key">时速：</span>';
|
||||
contentHTML += '<span class="_in_key_value">' + disTime[index].speed + ' km/h</span>';
|
||||
contentHTML += '</div>';
|
||||
contentHTML += '</div><div style="float:right;" class="_in_city_story">';
|
||||
contentHTML += '<img src="img/city.jpg"/></div></div>';
|
||||
contentHTML += '<div class="_in_story">';
|
||||
contentHTML += '<div>那座城市，那个人， 特价¥899</div>';
|
||||
contentHTML += '<div>再美不如苏州园林， 门票：¥40</div>';
|
||||
contentHTML += '<div>苏州好吃一窝，特价团购：¥30</div>';
|
||||
contentHTML += '<div>苏州必须去的5个景点，去了才知道</div>';
|
||||
contentHTML += '<div>假日酒店，全家人旅行特选，机场接送</div></div>';
|
||||
contentHTML += '<div class="_in_arrow_down"></div></div>';
|
||||
|
||||
var infoWindow = new AMap.InfoWindow({
|
||||
position: markers[cn].getPosition(),
|
||||
isCustom: true,
|
||||
offset:new AMap.Pixel(20, -35),
|
||||
content:contentHTML
|
||||
});
|
||||
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;
|
||||
$('.car_run_show').on('click', function(){
|
||||
if(carMarker){
|
||||
|
||||
}
|
||||
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, 50 * 1000);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
var tag = 0;
|
||||
$('.danmu').on('click', function(){
|
||||
if(tag % 2 === 0){
|
||||
$('#tanmu_div').css('visibility', 'visible');
|
||||
}else{
|
||||
$('#tanmu_div').css('visibility', 'hidden');
|
||||
}
|
||||
tag ++;
|
||||
});
|
||||
|
||||
})(window, $);
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user