使用ajax从MySql读数据，根据表中的经纬度信息在地图上打点

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>

上效果图原文链接：https://www.f2er.com/ajax/166493.html

使用ajax从MySql读数据，根据表中的经纬度信息在地图上打点

猜你在找的Ajax相关文章