<?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 45 浏览量
2016-12-12
10:28:38
上传
评论 6
收藏 295KB RAR 举报
huangchijun11
- 粉丝: 185
- 资源: 18
最新资源
- 基于yolov5识别算法实现的DNF自动脚本源码.zip
- 基于Python实现的自动化办公项目.zip
- 基于python实现的基于PyQt5和爬虫的小说阅读系统.zip
- 机械设计整经机上纱自动化sw20非常好的设计图纸100%好用.zip
- Screenshot_20240427_031602.jpg
- 网页PDF_2024年04月26日 23-46-14_QQ浏览器网页保存_QQ浏览器转格式(6).docx
- 直接插入排序,冒泡排序,直接选择排序.zip
- 在排序2的基础上,再次对快排进行优化,其次增加快排非递归,归并排序,归并排序非递归版.zip
- 实现了7种排序算法.三种复杂度排序.三种nlogn复杂度排序(堆排序,归并排序,快速排序)一种线性复杂度的排序.zip
- 冒泡排序 直接选择排序 直接插入排序 随机快速排序 归并排序 堆排序.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈