首先简要介绍一下我的程序的结构以及要实现的功能: 简而言之,该程序主要功能是实现将已知地址经纬度的某个点在地图上在地图上显示出来,程序主要分为三个模块:分别是 前端(html+css+js)、后台(php)、数据库(mysql),三模块分别实现下列功能。
数据库:存储某个地点的经纬度信息(因为所做项目要求显示的是公司某个硬件设备的所在地,所以,我称之为——设备地址);
后台:本后台实现的功能主要是通过sql语句查询到数据库里满足条件的设备的地址信息(经纬度),然后将这些地址信息以json格式输出,让前端页面可以通过ajax方式获取到;
//后台代码:abdcd294cc25a5b2cf2019a90a42e567$snstr, "Long"=>$longstr, "La"=>$lastr,"Status"=>$statusstr);//json格式的数组echo urldecode(json_encode($resultJson));//Json格式输出 */?>
前端:前端的主要功能是,通过调用百度地图api,显示一张地图,并将通过js(ajax)从后台获取的经纬度信息作为位置参数填入地图描点函数里,实现在地图上显示某个点的功能(当然,我的代码里从后台获取的信息并不只有经纬度,但因为是一个地图程序,关注焦点主要在经纬度上,所以阐述过程中只提经纬度,忽略其他信息);
//下面是前端代码:<!DOCTYPE html><html lang="en"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>设备地图</title> <style type="text/css"> body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";} #dev_map{height:500px;width:100%;} </style> <script type="text/javascript" src="jquery-1.12.1.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?&v=1.3"></script></head><body><p class="dev_map" id="dev_map"></p><!-- <p><button type="button" onclick="theLocation()">设备地图</button></p> --></body></html><script>var map = new BMap.Map("dev_map"); // 创建Map实例map.centerAndZoom(new BMap.Point(114.317, 30.594), 5); // 初始化地图,设置中心点坐标和地图级别//添加地图类型控件map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("武汉"); // 设置地图显示的城市 此项是必须设置的map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放var arr_longitude = new Array();var arr_latitude = new Array();var arr_sn = new Array();var arr_status = new Array();var arr_point = new Array();var mapSpots = new Array;var url = "http://image.tupian114.com/20140419/09274112.png";var content;var myIcon = new BMap.Icon(url, new BMap.Size(40,30));var opts = { width : 180, // 信息窗口宽度 height: 180, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 };// //获取经纬度 $(function() { $.ajax({ url: "mysql.search.handle.php", type: "GET", dataType:"json", async:false, success:function(data) { //alert(data.Long.split("_").length); for(var i=0;i<data.Long.split("_").length;i++) { arr_longitude[i]=data.Long.split("_")[i]; arr_latitude[i] = data.La.split("_")[i]; arr_sn[i] = data.SNstr.split("_")[i]; arr_status[i] = data.Status.split("_")[i]; arr_point[i] = new BMap.Point(arr_longitude[i],arr_latitude[i]); // marker = new BMap.Marker(arr_point[i]); // map.addOverlay(marker); } addSpots(data.Long.split("_").length); } }); }); function addSpots(arr_length){ alert("您有"+arr_length+"台设备!"); for(var i=0;i<arr_length;i++) { content = ""; content = "<p><span>SN码:" + arr_sn[i] + "</span></br>" + "<span>设备状态:" + translateOnline(arr_status[i]) + "</span></br>" + "<p class='btn'><a href='../DevAlarm/DevAla.html?SN=" + arr_sn[i] + "' target='fname'" + "'>报警配置</a></p>" +"<p class='btn'><a href='../DevAlarmView/DevAlarmView.html?SN=" + arr_sn[i] + "' target='fname'" + "'>报警信息</a></p>"+"<p class='btn'><a href='../DevRun/DevRun.html?SN=" + arr_sn[i] + "' target='fname'" + "'>实时数据</a></p>"+"<p class='btn'><a href='../history/history.html?SN=" + arr_sn[i] + "' target='fname'" + "'>历史数据</a></p>"+"<p class='btn'><a href='../DevCfg/DevCfg.html?SN=" + arr_sn[i] + "' target='fname'" + "'>数据可视与报警开关配置</a></p>"; marker = new BMap.Marker(arr_point[i]); map.addOverlay(marker); //var lable = new BMap.Label(content,{offset:new BMap.Size(20,-10)}); //marker.setLabel(lable); addClickHandler(content,marker); //添加点击处理程序(点击会出现sn码等信息) } }function addClickHandler(content,marker){ marker.addEventListener("click",function(e){ openInfo(content,e)} ); }function translateOnline(code){ if (code == 0) {return "离线";} else if(code == 1) {return "在线";} else{return "error";} }function openInfo(content,e){ var p = e.target; var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat); var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象 map.openInfoWindow(infoWindow,point); //开启信息窗口}</script>
这里我们只关注js部分的代码,在下面把这些关键代码重新贴出来方便观看:
var arr_longitude = new Array();var arr_latitude = new Array();var arr_sn = new Array();var arr_status = new Array();var arr_point = new Array();var mapSpots = new Array;var url = "http://image.tupian114.com/20140419/09274112.png";var content;var myIcon = new BMap.Icon(url, new BMap.Size(40,30));var opts = { width : 180, // 信息窗口宽度 height: 180, // 信息窗口高度 title : "信息窗口" , // 信息窗口标题 enableMessage:true//设置允许信息窗发送短息 };// //获取经纬度 $(function() { $.ajax({ url: "mysql.search.handle.php", type: "GET", dataType:"json", async:false, success:function(data) { // alert(data.Status);//弹出接收到的数据,调试用 // alert(data.La);//弹出接收到的数据,调试用 // alert(data.SNstr);//弹出接收到的数据,调试用 // alert(data.Long.split("_").length);//split是实现从一串用特定符号来连接的字符串中一次提取有用字符的功能(如me_you_he 用‘_’连接,用split可实现对me、you、he进行提取) var longstring=data.Long+''; var lastring=data.La+''; var SNstring=data.SNstr+''; var Statusstring=data.Status+''; for(var i=0;i < longstring.split("_").length;i++) { arr_longitude[i]=longstring.split("_")[i]; arr_latitude[i] = lastring.split("_")[i]; arr_sn[i] = SNstring.split("_")[i]; arr_status[i] = Statusstring.split("_")[i]; // alert("设备状态"+arr_status[i]); arr_point[i] = new BMap.Point(arr_longitude[i],arr_latitude[i]); marker = new BMap.Marker(arr_point[i]); map.addOverlay(marker); } addSpots(longstring.split("_").length); } , error: function(XMLHttpRequest, textStatus, errorThrown) {//这个error函数调试时非常有用,如果解析不正确,将会弹出错误框 alert(XMLHttpRequest.responseText); alert(XMLHttpRequest.status); alert(XMLHttpRequest.readyState); alert(textStatus); // parser error; } }); });
在最初写代码过程中,后台因为调试程序的需要,在程序中echo了很多调试信息,如图:
,但是这些信息并不是json格式的,当这些非json格式的信息被echo后,会被前台接收到。但前台的ajax是指定以json格式接收的,所以当接收到非json格式的文件后,ajax程序不会进入success里执行,而是进入error里弹出错误信息,同时,浏览器会根据种类不同弹出诸如:
XML错误:找不到根目录(火狐firefox)、flie could not be load :……(谷歌chrome)等错误。
经验教训:当后台通过json格式输出数据以供前台get时,切记,除了echo输出有用数据时,不可用echo输出其他一切无用数据,否则会造成前台数据接收格式出错。
以上为本人做项目过程中的一点小经验,如有谬误,请批评指正!、
相关推荐:
以上是PHP中echo语句滥用详解的详细内容。更多信息请关注PHP中文网其他相关文章!

本文比较了PHP和ASP.NET,重点是它们对大规模Web应用程序,性能差异和安全功能的适用性。两者对于大型项目都是可行的,但是PHP是开源和无关的,而ASP.NET,

本文讨论了PHP数据对象(PDO),这是PHP中数据库访问的扩展名。它通过准备好的语句及其对MySQLI的好处,包括数据库抽象和更好的错误处理,强调了PDO在增强安全性方面的作用。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

禅工作室 13.0.1
功能强大的PHP集成开发环境

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

SecLists
SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3 英文版
推荐:为Win版本,支持代码提示!