给个示意图你，自己理解下吧
A页面通过AJAX请求B.JSP页面，
B.JSP页面查询数据库，获得结果，输出页面，
A页面的AJAX获得B的结果，返回给B。
整个过程，AJAX相当于一台车，而里面坐什么人就看B页面
如果要描图的话 需要加载 相应的地图api 库 怎样描点要根据 api的格式 比如 , 我用baidu 的api 需要的是数组格式
那么代码 是这样的
function getGps_msg(cur_date){var rt_array=new Array()
cur_phone_no=$("#user_list").val()
$.ajax({
type:"get",
url:"json_gps.php",
async:false,
dataType:"json",
data:{cur_date:cur_date,phone_no:cur_phone_no},
success: function(msg){
for (var i=0i<msg.lengthi++){
rt_array[String(i)]=msg[i]
}
}
})
return rt_array
}
得到你一个描点的数组了. 再去描点
function drawPion(data_arr){//var data_arr=getGps_msg()
//alert (data_arr)
bm.clearOverlays()
var cx=data_arr['0']['longitude']
var cy=data_arr['0']['latitude']
bm.centerAndZoom(new BMap.Point(cx,cy),18)
var dianshu=0
for (var i=0i<data_arr.lengthi++){
var msg=data_arr[i]['rec_time']
var lab_msg=""
var xx= data_arr[i]['longitude']
var yy= data_arr[i]['latitude']
//alert (i)
var markergps = new BMap.Marker(new BMap.Point(xx,yy))
//bm.addOverlay(markergps,i) //添加GPS标注
if (dianshu==9){
bm.addOverlay(markergps,i) //添加GPS标注
dianshu=0
}else{
dianshu++
}
if(i==0){
//var markergps = new BMap.Marker(new BMap.Point(xx,yy))
bm.addOverlay(markergps,i) //添加GPS标注
lab_msg="最后位置"
}
if(data_arr[i]['img_file_path']!==""){
//var markergps = new BMap.Marker(new BMap.Point(xx,yy))
bm.addOverlay(markergps,i) //添加GPS标注
lab_msg+="[图]"
var sContent ="<img style='float:rightmargin:4px' id='imgDemo"+i+"' src='"+data_arr[i]['img_file_path']+"' width='320' height='240' title='photo'/>"
addClickHandler(sContent,markergps)
}
if (i==data_arr.length-1){
//var markergps = new BMap.Marker(new BMap.Point(xx,yy))
bm.addOverlay(markergps,i) //添加GPS标注
lab_msg="开始位置"
}
var labelgps = new BMap.Label(i+lab_msg,{offset:new BMap.Size(20,-10)})
markergps.setLabel(labelgps,i) //添加GPS标注
}
}
得到效果
完整代码如下：
html
<script>window.onload=function(){
try{
var xmlHttp = new XMLHttpRequest()
}catch(e){
//无法生成对象 那么就是IE浏览器或不支持AJAX
try{
var xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" )
}catch(e){
try{
var xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" )
}catch(e){
alert('你必须使用支持AJAX的浏览器')
}
}
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState == 4 && xmlHttp.status==200){
//请求完成！
var result = xmlHttp.responseText
var re = eval('('+result+')')
var htmlStr='<tr><td>ID</td><td>NAME</td></tr>'
for(var i=0i<re.lengthi++){
htmlStr+='<tr><td>'+re[i].id+'</td><td>'+re[i].name+'</td></tr>'
}
document.getElementById('result').innerHTML=htmlStr
}
}
xmlHttp.open('get','../phpLab/index.php',true)
xmlHttp.send(null)
}
</script>
<body>
<div id="showResult">
<table id="result">
</table>
<div>
</body>
php测试 代码
<?php//数据库只有两个字段 id,name
$handle = mysql_connect('localhost','root','')
mysql_select_db('test',$handle)
$sql="select * from testTbl"
$result = mysql_query($sql)
$arr = array()
while($r= mysql_fetch_assoc($result)){
$arr[]= $r
}
echo json_encode($arr)
?>
结果：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）