首先简要介绍一下我的程序的结构以及要实现的功能： 简而言之，该程序主要功能是实现将已知地址经纬度的某个点在地图上在地图上显示出来，程序主要分为三个模块：分别是 前端（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输出其他一切无用数据，否则会造成前台数据接收格式出错。
以上为本人做项目过程中的一点小经验，如有谬误，请批评指正！、
相关推荐：
Atas ialah kandungan terperinci PHP中echo语句滥用详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Terangkan bagaimana pengimbangan beban mempengaruhi pengurusan sesi dan bagaimana mengatasinya.Apr 29, 2025 am 12:42 AMBeban mengimbangi mempengaruhi pengurusan sesi, tetapi dapat diselesaikan dengan replikasi sesi, ketegangan sesi, dan penyimpanan sesi berpusat. 1. Sesi Replikasi Salinan Data Sesi Antara Pelayan. 2. Sesi Stickiness mengarahkan permintaan pengguna ke pelayan yang sama. 3. Penyimpanan Sesi Pusat menggunakan pelayan bebas seperti Redis untuk menyimpan data sesi untuk memastikan perkongsian data.
Terangkan konsep penguncian sesi.Apr 29, 2025 am 12:39 AMSessionlockingisatechniqueusedtoensureauserererersessionremainsexclusivetooneuseratatime.IScrucialFreventingDataCorruptionSandsecuritybreachesinmulti-userapplications.SessionLockingISimplementedusingserverververveChan
Adakah terdapat alternatif untuk sesi PHP?Apr 29, 2025 am 12:36 AMAlternatif untuk sesi PHP termasuk kuki, pengesahan berasaskan token, sesi berasaskan pangkalan data, dan redis/memcached. 1.Cookies Menguruskan sesi dengan menyimpan data pada klien, yang mudah tetapi rendah dalam keselamatan. 2. Pengesahan berasaskan token menggunakan token untuk mengesahkan pengguna, yang sangat selamat tetapi memerlukan logik tambahan. 3.Database-berasaskan data menyimpan data dalam pangkalan data, yang mempunyai skalabilitas yang baik tetapi boleh menjejaskan prestasi. 4. Redis/Memcached menggunakan cache yang diedarkan untuk meningkatkan prestasi dan skalabiliti, tetapi memerlukan pemadanan tambahan
Tentukan istilah 'sesi rampasan' dalam konteks PHP.Apr 29, 2025 am 12:33 AMSessionHijacking merujuk kepada penyerang yang menyamar sebagai pengguna dengan mendapatkan sessionId pengguna. Kaedah pencegahan termasuk: 1) menyulitkan komunikasi menggunakan HTTPS; 2) mengesahkan sumber sessionId; 3) menggunakan algoritma generasi sesi yang selamat; 4) Secara kerap mengemas kini sessionId.
Apakah bentuk penuh PHP?Apr 28, 2025 pm 04:58 PMArtikel ini membincangkan PHP, memperincikan bentuk penuhnya, kegunaan utama dalam pembangunan web, perbandingan dengan Python dan Java, dan kemudahan pembelajarannya untuk pemula.
Bagaimanakah PHP mengendalikan data borang?Apr 28, 2025 pm 04:57 PMPHP mengendalikan data borang menggunakan $ \ _ post dan $ \ _ mendapatkan superglobals, dengan keselamatan memastikan melalui pengesahan, sanitisasi, dan interaksi pangkalan data yang selamat.
Apakah perbezaan antara PHP dan ASP.NET?Apr 28, 2025 pm 04:56 PMArtikel ini membandingkan PHP dan ASP.NET, memberi tumpuan kepada kesesuaian mereka untuk aplikasi web berskala besar, perbezaan prestasi, dan ciri keselamatan. Kedua-duanya berdaya maju untuk projek besar, tetapi PHP adalah sumber terbuka dan bebas platform, sementara ASP.NET,
Adakah PHP adalah bahasa sensitif kes?Apr 28, 2025 pm 04:55 PMKepekaan kes PHP berbeza -beza: Fungsi tidak sensitif, manakala pembolehubah dan kelas sensitif. Amalan terbaik termasuk penamaan yang konsisten dan menggunakan fungsi kes-insensitif untuk perbandingan.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Pelayar Peperiksaan Selamat
Pelayar Peperiksaan Selamat ialah persekitaran pelayar selamat untuk mengambil peperiksaan dalam talian dengan selamat. Perisian ini menukar mana-mana komputer menjadi stesen kerja yang selamat. Ia mengawal akses kepada mana-mana utiliti dan menghalang pelajar daripada menggunakan sumber yang tidak dibenarkan.
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
