161 lines
4.9 KiB
HTML
161 lines
4.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<title>百度地图</title>
|
|
<!--引用百度地图API-->
|
|
<style type="text/css">
|
|
html,body{margin:0;padding:0;}
|
|
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
|
|
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
|
|
</style>
|
|
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
|
|
<link rel="stylesheet" href="./jqueryui.css">
|
|
<script src="./jquery.js"></script>
|
|
<script src="./jqueryui.js"></script>
|
|
<script src="./index.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!--百度地图容器-->
|
|
<center>
|
|
<div style="width:1000px;height:650px;border:#ccc solid 1px;">
|
|
<div style="width:800px;height:600px;border:#ccc solid 1px;" id="dituContent"></div>
|
|
<br>
|
|
高度:<br>
|
|
<div id="slider"></div>
|
|
速度:<br>
|
|
<div id="slider-speed"></div><br>
|
|
</div>
|
|
<br>
|
|
<br><br>
|
|
位置:(lat,lon,hgt)
|
|
<p id="pp"></p>
|
|
<button onclick="start()">START</button>
|
|
</center>
|
|
</body>
|
|
<script type="text/javascript">
|
|
//创建和初始化地图函数：
|
|
function initMap(){
|
|
createMap();//创建地图
|
|
setMapEvent();//设置地图事件
|
|
addMapControl();//向地图添加控件
|
|
}
|
|
|
|
//创建地图函数：
|
|
function createMap(){
|
|
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
|
|
var point = new BMap.Point(104.50553,34.39016);//定义一个中心点坐标
|
|
map.centerAndZoom(point,5);//设定地图的中心点和坐标并将地图显示在地图容器中
|
|
window.map = map;//将map变量存储在全局
|
|
}
|
|
|
|
//地图事件设置函数：
|
|
function setMapEvent(){
|
|
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
|
|
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
|
|
map.disableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
|
|
map.enableKeyboard();//启用键盘上下左右键移动地图
|
|
}
|
|
|
|
//地图控件添加函数：
|
|
function addMapControl(){
|
|
//向地图中添加缩放控件
|
|
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
|
|
map.addControl(ctrl_nav);
|
|
//向地图中添加缩略图控件
|
|
//向地图中添加比例尺控件
|
|
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
|
|
map.addControl(ctrl_sca);
|
|
}
|
|
|
|
var lat=39.0;
|
|
var lon=116.0;
|
|
var hgt=100.0;
|
|
var points=[];
|
|
var d2m=2*Math.PI*6371000/360;
|
|
function d2l(a){//degree to linear
|
|
return {x:a.lon*d2m,y:a.lat*d2m,z:a.alt};
|
|
}
|
|
function l2d(a){
|
|
return {lon:a.x/d2m,lat:a.y/d2m,alt:a.z};
|
|
}
|
|
function ladd(a,b){//linear substrate
|
|
return {x:a.x+b.x,y:a.y+b.y,z:a.z+b.z};
|
|
}
|
|
function lsub(a,b){
|
|
return {x:a.x-b.x,y:a.y-b.y,z:a.z-b.z};
|
|
}
|
|
function lmul(a,b){
|
|
return {x:a.x*b,y:a.y*b,z:a.z*b};
|
|
}
|
|
|
|
|
|
function ll(a){
|
|
return Math.sqrt(a.x*a.x+a.y*a.y+a.z*a.z);
|
|
}
|
|
function norm(l){
|
|
var lll=ll(l);
|
|
return {x:l.x/lll,y:l.y/lll,z:l.z/lll};
|
|
}
|
|
var lt=0;
|
|
var st=0;
|
|
var pos=d2l({lon:139,lat:32,alt:10});
|
|
var des=pos;
|
|
var vec={x:0,y:0,z:0};
|
|
var lines=[];
|
|
|
|
initMap();//创建和初始化地图
|
|
var mainmarker = new BMap.Marker(new BMap.Point(lon,lat));
|
|
var mlabel = new BMap.Label("main",{offset:new BMap.Size(20,-10)});
|
|
map.addOverlay(mainmarker);
|
|
mainmarker.setLabel(mlabel);
|
|
map.addEventListener("click",function(e){
|
|
des=d2l({lon:e.point.lng,lat:e.point.lat,alt:20});
|
|
vec=norm(lsub(des,pos));
|
|
console.log(e.point.lng+","+e.point.lat);
|
|
});
|
|
map.addEventListener("dblclick",function(e){
|
|
pos=d2l({lon:e.point.lng,lat:e.point.lat,alt:20});
|
|
console.log(e.point.lng+","+e.point.lat);
|
|
});
|
|
function post(){
|
|
|
|
//hgt=$("#slider").slider("value");
|
|
if(ll(lsub(des,pos))>=10){
|
|
map.clearOverlays();
|
|
pos=ladd(pos,lmul(vec,$("#slider-speed").slider("value")/10))
|
|
lonb=l2d(pos).lon;
|
|
latb=l2d(pos).lat;
|
|
alt=l2d(pos).alt;
|
|
var gcj = coordtransform.bd09togcj02(lonb,latb);
|
|
var wgs = coordtransform.gcj02towgs84(gcj[0],gcj[1]);
|
|
lon=wgs[0];
|
|
lat=wgs[1];
|
|
//mainmarker.setPosition(new BMap.Point(lon,lat));
|
|
marker = new BMap.Marker(new BMap.Point(lonb,latb));
|
|
map.addOverlay(marker);
|
|
//console.log(lon+","+lat);
|
|
}
|
|
$("#pp").html("lon:"+lon+" lat:"+lat+" hgt:"+hgt+"spd:"+$("#slider-speed").slider("value")/10);
|
|
$.post("/post",{"lon":lon,"lat":lat,"hgt":hgt});
|
|
$("#pp").html("lon:"+lon+" lat:"+lat+" hgt:"+hgt+"spd:"+$("#slider-speed").slider("value")/10);
|
|
}
|
|
$(function() {
|
|
$( "#slider" ).slider({
|
|
min: -1000,
|
|
max: 8848,
|
|
value: 10,
|
|
});
|
|
$( "#slider-speed" ).slider({
|
|
min: 0,
|
|
max: 100,
|
|
value: 0,
|
|
});
|
|
setInterval(post,100);
|
|
});
|
|
</script>
|
|
|
|
</html>
|