使用ajax从MySql读数据，根据表中的经纬度信息在地图上打点
发布时间：2020-12-15 20:58:29 所属栏目：百科 来源：网络整理
导读：php文件代码如下： ?php/** * 数据库配置信息 */$db_config = array('host' = "localhost",'user' = "root",//'password' = "password",'password' = null,//'database' = "gis"'database' = "a0722152915");/** * flush outputbuffer并将其输出到客户端，可
|
php文件代码如下： <?php
/**
* 数据库配置信息
*/
$db_config = array(
'host' => "localhost",'user' => "root",//'password' => "password",'password' => null,//'database' => "gis"
'database' => "a0722152915"
);
/**
* flush outputbuffer并将其输出到客户端，可实现即时输出
* @param unknown_type $str
*/
function qk_echo($str) {
echo $str;
ob_flush();//刷新缓存
flush();
}
/**
* Helper 类，用于接收http请求并对外提供服务
*/
class Helper{
private $db_config;
public function __construct($db_config){
$this->db_config=$db_config;
}
/**
* 对外提供api接口
* @param method api名称
*/
public function do_api(){
$method=$_GET['method'];
$result="";
switch ($method) {
case 'get_trj':
# code...
$result=$this->get_trj();
break;
default:
# code...
break;
}
qk_echo($result); //Response
}
/**
* 获取轨迹信息，以字符串的形式返回
*/
private function get_trj(){
//初始化数据库连接
$conn=mysql_connect($this->db_config['host'],$this->db_config['user'],$this->db_config['password']);
//选择数据库
@mysql_select_db($this->db_config['database'],$conn);
//$table_name="trajectory";
//$table_name="ap_max";
$table_name="wifi_state";
//$table_name="wifi";
//$sql="select id,lng,lat,ssid,rssiMax,rssiMin,wifi_mac,testPointNum,wifi_mac_used from ".$table_name;
$sql="select id,lon,time,encyptiontype,rssi,name from ".$table_name;
//$sql="select id,gps_lon,gps_lat,wifi_name,ap_free from ".$table_name;
// 执行sql查询
$rs=mysql_query($sql,$conn);
$result=array();
while($row=mysql_fetch_row($rs)){
//加入经纬度信息
$result[]=array($row[1],$row[2],$row[3],$row[4],$row[5],$row[6]);
//$result[]=array($row[1],$row[4]);
}
//关闭数据集
@mysql_close($rs);
//返回结果
return json_encode($result);
}
}
$helper=new Helper($db_config);
$helper->do_api();
html文件如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,html,#allmap {
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
#l-map{
height:100%;
width:78%;
float:left;
border-right:2px solid #bcbcbc;
}
#r-result{
height:100%;
width:20%;
float:left;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<title>WiFiAP Demo</title>
</head>
<body>
<!--<div id="allmap"></div>-->
<div id="l-map"></div>
<div id="r-result">
<input type="button" onclick="map.clearOverlays();" value="显示" />
<input type="button" onclick="marker3.hide();" value="隐藏" />
</div>
</body>
</html>
<script type="text/javascript">
/**
* 将字符串转换为JSON对象
* @param str
* @returns
*/
var content;
function str2JSON(str) {
str=$.trim(str);
if(str!=""){
return eval('(' + str + ')');
}else{
return Object();
}
}
//通过Ajax获取轨迹
function get_trj(fn){
var url="index.php"
$.get(url,{
method:'get_trj'
},function(result){//result为php返回的JSON字符串
result=str2JSON(result);
// alert(result);
fn(result);
});
}
function get_testPoint(fn){
var url="setPoint.php"
$.get(url,{
method:'get_testPoint'
},function(result){//result为php返回的JSON字符串
result=str2JSON(result);
// alert(result);
fn(result);
});
}
/*
var map = new BMap.Map("l-map");
map.centerAndZoom("北京",15);
var marker3 = new BMap.Marker(new BMap.Point(116.404,39.915)); // 创建标注
map.addOverlay(marker3);
*/
$(function(){ //页面加载完毕后执行
/*
var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>天安门</h4>" +
"<img style='float:right;margin:4px' id='imgDemo' src='http://app.baidu.com/map/images/tiananmen.jpg' width='139' height='104' title='天安门'/>" +
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
"</div>";
var infoWindow = new BMap.InfoWindow(sContent); // 创建信息窗口对象
*/
//var marker1;
//var map = new BMap.Map("allmap");
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.377,39.979),14);
map.enableScrollWheelZoom();
var myIcon1 = new BMap.Icon("img/baidu_wifi_public.png",new BMap.Size(38,38),{ //小车图片
//offset: new BMap.Size(0,-5),//相当于CSS精灵
imageOffset: new BMap.Size(0,0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var myIcon2 = new BMap.Icon("img/baidu_wifi_business.png",0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
var myIcon3 = new BMap.Icon("img/pointer.png",0) //图片的偏移量。为了是图片底部中心对准坐标点。
});
//用于打点
function addMarker1(point,i){
var marker1 = new BMap.Marker(point,{icon:myIcon1});
//marker1.setTitle("CMCC");
map.addOverlay(marker1);
marker1.addEventListener("click",function(){
marker1.disableMassClear();
//图片加载完毕重绘infowindow
//marker2.hide();
// map.clearOverlays();
//map.centerAndZoom(marker1,14);
this.openInfoWindow(i);
marker1.enableMassClear();
get_testPoint(testPoint_callback);
content = i.getContent();
//alert(content);
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw();
//infoWindowArray[i].redraw();
i.redraw();
}
});
}
function addMarker2(point,i){
var marker2 = new BMap.Marker(point,{icon:myIcon2});
marker2.setTitle("CMCC-edu");
map.addOverlay(marker2);
marker2.addEventListener("click",function(){
marker2.disableMassClear();
//图片加载完毕重绘infowindow
//marker2.hide();
map.clearOverlays();
this.openInfoWindow(i);
//this.openInfoWindow(infoWindowArray[i]);
//图片加载完毕重绘infowindow
marker2.enableMassClear();
get_testPoint(testPoint_callback);
content = i.getContent();
document.getElementById('imgDemo').onload = function (){
infoWindow.redraw();
//infoWindowArray[i].redraw();
i.redraw();
}
});
}
function addMarker3(point,i){
var marker3 = new BMap.Marker(point,{icon:myIcon3});
marker3.setTitle("testPoint");
map.addOverlay(marker3);
marker3.addEventListener("click",function(){
this.openInfoWindow(i);
//this.openInfoWindow(infoWindowArray[i]);
//图片加载完毕重绘infowindow
});
}
//用于显示轨迹的回调函数
var trj_callback=function(pts_array){
//将获取的array转换为BMap.Point
var pts=Array();
var sContentArray=Array();
var infoWindowArray=Array();
var green = "#00ff00";
var red = "#ff0000";
var blue = "#0000FF";
for(var i=0;i<pts_array.length;i++){
pts.push(new BMap.Point(pts_array[i][0],pts_array[i][1]));
//sContentArray[i] = "ssid:"+pts_array[i][2]+"</br>"+"rssiMax:"+pts_array[i][3]+"dB"+"</br>"+"rssiMin:"+pts_array[i][4]+"dB"+"</br>"+"macAddress:"+pts_array[i][7]+"</br>"+"testPointNum:"+pts_array[i][6];
sContentArray[i] = "time:"+pts_array[i][2]+"</br>"+"encyptiontype:"+pts_array[i][3]+"</br>"+"RSSI:"+pts_array[i][4]+"dB"+"</br>"+"SSID:"+pts_array[i][5];
infoWindowArray[i] = new BMap.InfoWindow(sContentArray[i]); // 创建信息窗口对象
//alert(infoWindowArray[i]);
//alert(pts[i]);
infoWindowArray[i].enableAutoPan();
/*
infoWindowArray[i].addEventListener("close",function(){
map.clearOverlays();
get_trj(trj_callback);
});
*/
/*
if(pts_array[i][2]=="cmcc-edu") addMarker1(pts[i],infoWindowArray[i]);
else if(pts_array[i][3]=="free") addMarker2(pts[i],infoWindowArray[i]);
*/
//if(pts_array[i][2]=="CMCC") addMarker1(pts[i],infoWindowArray[i]);
addMarker1(pts[i],infoWindowArray[i]);
//else if(pts_array[i][2]=="CMCC-edu") addMarker2(pts[i],infoWindowArray[i]);
}
//for(var i=0;i<pts_array.length;i++){
for(var i=18;i<72;i++){
var color_green = green;
var color_red = red;
var color_blue = blue;
if(pts_array[i][5]=="CMCC")
var polyline = new BMap.Polyline([pts[i],pts[i+1]],{strokeColor:color_green,strokeWeight:6,strokeOpacity:0.5});
if(pts_array[i][5]=="UMTS")
var polyline = new BMap.Polyline([pts[i],{strokeColor:color_red,strokeOpacity:0.5});
if(pts_array[i][5]=="synopsys-guest")
var polyline = new BMap.Polyline([pts[i],{strokeColor:color_blue,strokeOpacity:0.5});
map.addOverlay(polyline);
}
};
var testPoint_callback=function(testpts_array){
//将获取的array转换为BMap.Point
var pts=Array();
var sContentArray=Array();
var infoWindowArray=Array();
for(var i=0;i<testpts_array.length;i++){
pts.push(new BMap.Point(testpts_array[i][0],testpts_array[i][1]));
sContentArray[i] = "rssi:"+testpts_array[i][2]+"</br>"+"macAddress:"+testpts_array[i][3];
infoWindowArray[i] = new BMap.InfoWindow(sContentArray[i]); // 创建信息窗口对象
//alert(infoWindowArray[i]);
//alert(pts[i]);
//if(testpts_array[i][2]>-60) addMarker1(pts[i],infoWindowArray[i]);
//alert(content);
//alert(testpts_array[i][3]);
//alert(strpos(content,testpts_array[i][3]));
if(content.indexOf(testpts_array[i][3])>0 ) addMarker3(pts[i],infoWindowArray[i]);
//if(content2.indexOf(testpts_array[i][3])>0 ) addMarker2(pts[i],infoWindowArray[i]);
//else alert("111");
}
};
//get_testPoint(testPoint_callback);
get_trj(trj_callback); //执行轨迹显示
});
</script>
上效果图 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |