首先简要介绍一下我的程序的结构以及要实现的功能: 简而言之,该程序主要功能是实现将已知地址经纬度的某个点在地图上在地图上显示出来,程序主要分为三个模块:分别是 前端(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把负数转为正整数的方法:1、使用abs()函数将负数转为正数,使用intval()函数对正数取整,转为正整数,语法“intval(abs($number))”;2、利用“~”位运算符将负数取反加一,语法“~$number + 1”。

php除以100保留两位小数的方法:1、利用“/”运算符进行除法运算,语法“数值 / 100”;2、使用“number_format(除法结果, 2)”或“sprintf("%.2f",除法结果)”语句进行四舍五入的处理值,并保留两位小数。

判断方法:1、使用“strtotime("年-月-日")”语句将给定的年月日转换为时间戳格式;2、用“date("z",时间戳)+1”语句计算指定时间戳是一年的第几天。date()返回的天数是从0开始计算的,因此真实天数需要在此基础上加1。

在当今科技快速发展的时代,编程语言也如雨后春笋般涌现出来。其中一门备受瞩目的语言就是Go语言,它以其简洁、高效、并发安全等特性受到了许多开发者的喜爱。Go语言以其强大的生态系统而著称,其中有许多优秀的开源项目。本文将介绍五个精选的Go语言开源项目,带领读者一起探索Go语言开源项目的世界。KubernetesKubernetes是一个开源的容器编排引擎,用于自

《Go语言开发必备:5个热门框架推荐》Go语言作为一门快速、高效的编程语言,受到越来越多开发者的青睐。为了提高开发效率,优化代码结构,很多开发者选择使用框架来快速搭建应用。在Go语言的世界中,有许多优秀的框架可供选择。本文将介绍5个热门的Go语言框架,并提供具体的代码示例,帮助读者更好地理解和使用这些框架。1.GinGin是一个轻量级的Web框架,拥有快速

php判断有没有小数点的方法:1、使用“strpos(数字字符串,'.')”语法,如果返回小数点在字符串中第一次出现的位置,则有小数点;2、使用“strrpos(数字字符串,'.')”语句,如果返回小数点在字符串中最后一次出现的位置,则有。

在PHP中,可以利用implode()函数的第一个参数来设置没有分隔符,该函数的第一个参数用于规定数组元素之间放置的内容,默认是空字符串,也可将第一个参数设置为空,语法为“implode(数组)”或者“implode("",数组)”。

查找方法:1、用strpos(),语法“strpos("字符串值","查找子串")+1”;2、用stripos(),语法“strpos("字符串值","查找子串")+1”。因为字符串是从0开始计数的,因此两个函数获取的位置需要进行加1处理。


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

记事本++7.3.1
好用且免费的代码编辑器

Atom编辑器mac版下载
最流行的的开源编辑器

WebStorm Mac版
好用的JavaScript开发工具

ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境