91 lines
3.0 KiB
HTML
91 lines
3.0 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>
|
||
|
|
</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></div>
|
||
|
|
<br>
|
||
|
|
位置:(lat,lon,hgt)
|
||
|
|
<p id="pp"></p>
|
||
|
|
</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.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
|
||
|
|
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;
|
||
|
|
var lon=116;
|
||
|
|
var hgt=100
|
||
|
|
initMap();//创建和初始化地图
|
||
|
|
map.addEventListener("click",function(e){
|
||
|
|
lat=e.point.lat;
|
||
|
|
lon=e.point.lng;
|
||
|
|
});
|
||
|
|
function post(){
|
||
|
|
hgt=$("#slider").slider("value");
|
||
|
|
$.post("/post",{"lon":lon,"lat":lat,"hgt":hgt});
|
||
|
|
$("#pp").html("lon:"+lon+" lat:"+lat+" hgt:"+hgt);
|
||
|
|
}
|
||
|
|
$(function() {
|
||
|
|
$( "#slider" ).slider({
|
||
|
|
min: -1000,
|
||
|
|
max: 8848,
|
||
|
|
value: 10,
|
||
|
|
});
|
||
|
|
setInterval(post,100);
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|