如果要描图的话 需要加载 相应的地图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标注
}
}
得到效果
以net MVC为例：
数据的读取不需要转为json，在控制器中，
public JsonResult Test(){
List<T> list=new List<T>() // 读取数据
return Json(list)
}
前端ajax请求，可以直接使用这个json对象
$.ajax({
url: '',
success: function (data) {
// 循环data
}
})
jsp中用ajax获取数据的例子如下：jsp代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath()
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<TITLE>留学生系统</TITLE>
<META http-equiv=Content-Type content="text/htmlcharset=GBK">
<SCRIPT language=JavaScript type=text/JavaScript>
var XMLHttpReq = false
//ajax接口
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
XMLHttpReq = new XMLHttpRequest()
}else if(window.ActiveXObject){
try{
XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP")
}catch(e){
try{
XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP")
}catch(e1){}
}
}
}
function sendRequest(url){
createXMLHttpRequest()
XMLHttpReq.open("GET",url,true)
XMLHttpReq.onreadystatechange = processResponse
XMLHttpReq.send(null)
}
function processResponse(){
if(XMLHttpReq.readyState == 4){
if(XMLHttpReq.status == 200){
var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data
window.alert(res)
document.myform.userid.value=""
document.myform.pwd.value=""
}else{
window.alert("你请求的页面有异常1")
}
}
}
function userCheck(){
var userid = document.myform.userid.value
var pwd = document.myform.pwd.value
if(userid == ""){
window.alert("用户名不能为空")
document.myform.pwd.value=""
document.myform.userid.focus()
return false
}else{
sendRequest("login?userid="+userid)
}
}
function pwdCheck(){
var pwd = document.myform.pwd.value
var pwd2 = document.myform.pwd2.value
if(pwd!=pwd2){
window.alert("密码不一致")
document.myform.pwd.value=""
document.myform.pwd2.value=""
document.myform.pwd.focus()
return false
}
}
</SCRIPT>
<LINK href="css/css.css" type=text/css rel=stylesheet>
</HEAD>
<body>
<table width="778" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" >
<tr>
<td width="17%"><img src="images/logo.jpg" width="124" height="101"></td>
<td width="558" height="101" background="images/banner.jpg"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="558" height="101">
<param name="movie" value="images/2.swf">
<param name="quality" value="high">
<embed src="images/2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="558" height="101"></embed>
<param name="wmode" value="transparent">
</object>
</div></td>
<td width="11%"><table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td height="30" class="style1"><div align="center">设为首页</div></td>
</tr>
<tr>
<td height="30" class="style1"><div align="center">收藏本站</div></td>
</tr>
<tr>
<td height="30" class="style1"><div align="center">联系我们</div></td>
</tr>
</table></td>
</tr>
</table>
<form method="post" action="control.jsp?action=register" name="myform">
<table width="300" border="0" align="center" bgcolor="#F0F0F0">
<tr>
<td align="center">用户名</td>
<td><input name="userid" type="text" size="20" onblur="userCheck()"></td>
</tr>
<tr>
<td align="center">真实姓名</td>
<td><input name="username" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="sex" value="0" checked="checked">男
<input type="radio" name="sex" value="1">女
</td>
</tr>
<tr>
<td align="center">密码</td>
<td><input name="pwd" type="password" size="20"/></td>
</tr>
<tr>
<td align="center">密码确认</td>
<td><input name="pwd2" type="password" size="20" onblur="pwdCheck()"/></td>
</tr>
<tr>
<td align="center">电子邮箱</td>
<td><input name="email" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">学校</td>
<td><input name="school" type="text" size="20"/></td>
</tr>
<tr>
<td align="center">电话号码</td>
<td><input name="phonenum" type="text" size="20"/></td>
</tr>
<tr>
<td align="center"><img border=0 src="image.jsp"></td>
<td><input type=text name=in maxlength=4 size="8"></td>
</tr>
<tr>
<td align="center"><input type="submit" value="确定" /></td>
</tr>
</table>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）