<?php
header("content-type:text/html;charset=gbk");//设定使用gbk中文编码
require_once('../xiangmu/user_xinxi.php'); //声明连接user_xinxi.php
require_once('../PHP/loginin.php'); //声明登录文件
require_once('../PHP/forbid.php'); //声明禁止“退出后通过地址访问”的文件
?>
<!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" />
<script src="../JS/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=pSIDd3d6Ol4fZGoaHle3tIK5"></script>
<title>百度地图标注点</title>
</head>
<body>
<table width="100%" border="0" align="center" bgcolor="#FFCC99">
<tr>
<td width="27%" height="68" rowspan="2"><img width="200" height="106" src="../Images/wurenji.jpg"/></td>
<td height="68" colspan="4"><font face="隶书" size="+5" color="#cccc00">无人机远程监控系统</font> </td>
<td width="7%" rowspan="2"> </td>
</tr>
<tr>
<td colspan="4" align="center" height="100"><font color="#FF0000" size="+2"><?php echo $_SESSION['MM_Username']; ?>,欢迎您的访问!</font></td> <!--通过session显示登录的用户名,添加欢迎标语-->
</tr>
<tr>
<td height="169" align="center" colspan="6"><table width="100%" border="0" align="center">
<!--css-->
<link href="../CSS/demo.css" rel="stylesheet" type="text/css" />
<div class="demo_main">
<fieldset class="demo_content">
<div style="min-height: 550px; width: 100%;" id="allmap">
</div>
<script type="text/javascript">
//百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
var point = new BMap.Point(110.404, 38.915); // 创建点坐标
window.onload = loadMap; //将显示界面指向loadMap函数定义的界面
function loadMap(){
loadJScript(); //初始化地图
map.centerAndZoom(point,5); //设定地图显示比例
map.enableScrollWheelZoom();
//向地图中添加缩放控件
var ctrlNav = new window.BMap.NavigationControl({
anchor: BMAP_ANCHOR_TOP_LEFT,
type: BMAP_NAVIGATION_CONTROL_LARGE
});
map.addControl(ctrlNav);
//向地图中添加缩略图控件
var ctrlOve = new window.BMap.OverviewMapControl({
anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1
});
map.addControl(ctrlOve);
//向地图中添加比例尺控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);
init(); //实时刷新
//setInterval("init()",1000)
//getdata();
}
function loadJScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://api.map.baidu.com/api?v=2.0&ak=pSIDd3d6Ol4fZGoaHle3tIK5&callback=init";
document.body.appendChild(script);
}
function init() {
getdata();
setInterval("getdata()",1000) ;//设定每一秒钟刷新一次
}
function deletePoint()
{ //删除所有图钉函数
var allOverlay = map.getOverlays();
for (var i = 0; i < allOverlay.length -1; i++){
map.clearOverlays(); //清除图钉函数
return false;
}
}
function getdata(){ //使用ajax函数读取数据中的经纬度坐标等信息
$.ajax({
type: "GET",
url: "../PHP/getzuobiao.php",//将调用的地址指向getzuobiao.php文件
data: {},
dataType: "",
cache:false,
success: function(data){
// alert(data);
var data1 = JSON.parse(data);
deletePoint();
var marker = new Array();
var info = new Array();
//var marker = new Array();
for(var i=0;i<data1.length;i++) {
//var info = new Array(); //存放提示信息窗口对象的数组
//var marker = new Array();
marker[i]= new BMap.Marker(new BMap.Point(data1[i].Longitude,data1[i].Latitude)); // 创建标注点
map.addOverlay(marker[i]); //添加标注
var label = new window.BMap.Label(data1[i].FlyID, { offset: new window.BMap.Size(20, -10) }); //创建标签
marker[i].setLabel(label); //添加标签
info[i]= new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + data1[i].FlyID + "</br> 经度:" + data1[i].Longitude +" 纬度:" + data1[i].Latitude +"</br>油量:" + data1[i].Oil + " 航向:" + data1[i].FlyDirection +"</br> 速度:" + data1[i].Speed +" 高度:" + data1[i].Height + "</br></p>"); // 创建信息窗口对象
//alert(data1[i].Longitude);
//info2= new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + data1[1].FlyID + "</br>经度:" + data1[1].Oil + "</br> 纬度:" + data1[1].FlyDirection +"</br> 速度:" + data1[1].Speed +"</br> 高度:" + data1[1].Height + "</br></p>"); // 创建信息窗口对象
// marker[i].addEventListener("mouseover", function () {
// this.openInfoWindow(info[i] );}
// );
} // end for
<!--下面10个监听事件,就是监控鼠标经过时打开信息窗口,进行信息显示-->
marker[0].addEventListener("mouseover", function () {
this.openInfoWindow(info[0]);
});
marker[1].addEventListener("mouseover", function () {
this.openInfoWindow(info[1]);
});
marker[2].addEventListener("mouseover", function () {
this.openInfoWindow(info[2]);
});
marker[3].addEventListener("mouseover", function () {
this.openInfoWindow(info[3]);
});
marker[4].addEventListener("mouseover", function () {
this.openInfoWindow(info[4]);
});
marker[5].addEventListener("mouseover", function () {
this.openInfoWindow(info[5]);
});
marker[6].addEventListener("mouseover", function () {
this.openInfoWindow(info[6]);
});
marker[7].addEventListener("mouseover", function () {
this.openInfoWindow(info[7]);
});
marker[8].addEventListener("mouseover", function () {
this.openInfoWindow(info[8]);
});
marker[9].addEventListener("mouseover", function () {
this.openInfoWindow(info[9]);
});
// for(var i=0;i<data1.length;i++) {
// info= new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + data1[i].FlyID + "</br>经度:" + data1[i].Oil + "</br> 纬度:" + data1[i].FlyDirection +"</br> 速度:" + data1[i].Speed +"</br> 高度:" + data1[i].Height + "</br></p>"); // 创建信息窗口对象
// marker[i].addEventListener("mouseover", function () {
// this.openInfoWindow(info);// 创建信息窗口对象
//
// });
// }
}
});
}
</script>
</fieldset>
</table>
<tr>
<td width="29%" height="20"> </td>
<td valign="m
使用AJAX技术调用百度地图API进行经纬度标注和实时显示
4星 · 超过85%的资源 需积分: 48 20 浏览量
2016-12-12
10:28:38
上传
评论 6
收藏 295KB RAR 举报
huangchijun11
- 粉丝: 185
- 资源: 18
最新资源
- NetOps-py通过sftp替换网络设备启动文件
- STM32单片机FPGA毕设电路原理论文报告任务驱动教学法在单片机课程教学中的应用
- STM32单片机FPGA毕设电路原理论文报告任务驱动法在单片机教学中的应用
- STM32单片机FPGA毕设电路原理论文报告人造金刚石压机智能化压力测控系统设计
- 以某列为依据匹配多项(Excel版)
- STM32单片机FPGA毕设电路原理论文报告人体短臂离心机实验台的显示控制系统
- STM32单片机FPGA毕设电路原理论文报告人工气候室监控系统的环境控制器研究
- STM32单片机FPGA毕设电路原理论文报告染整自动线张力控制系统的设计
- 数据挖掘与机器学习-实验
- 基于Linux系统Nginx的动态网站的LNMP环境源码包
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈