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

来源：互联网发布：欧盟经济数据编辑：程序博客网时间：2024/04/28 19:45

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,lat,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[2],$row[3],$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", new BMap.Size(38, 38), {    //小车图片//offset: new BMap.Size(0, -5),    //相当于CSS精灵imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。});var myIcon3 = new BMap.Icon("img/pointer.png", new BMap.Size(38, 38), {    //小车图片//offset: new BMap.Size(0, -5),    //相当于CSS精灵imageOffset: new BMap.Size(0, 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.Pointvar 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],pts[i+1]], {strokeColor:color_red, strokeWeight:6, strokeOpacity:0.5});if(pts_array[i][5]=="synopsys-guest")var polyline = new BMap.Polyline([pts[i],pts[i+1]], {strokeColor:color_blue, strokeWeight:6, strokeOpacity:0.5});map.addOverlay(polyline);}};var testPoint_callback=function(testpts_array){//将获取的array转换为BMap.Pointvar 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>

上效果图