附件中的地图连线.rar是简单的连线html例子。
在百度上把几个坐标按数据库中查询出来的时间顺序直线连接起来
<%@ include file="../../jsp/common/getSession.jsp"%> <%@ include file="../../jsp/common/standAloneJSHeader.jsp" %> <html> <head> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} </style> <script type="text/javascript" src="../../script/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.3"></script> <script type="text/javascript" src="../../script/json2.js"></script> <% String sfzh = Util.NVLL(request.getParameter("sfzh")); String selectDate = Util.NVLL(request.getParameter("selectDate")); String pp=sfzh+"|"+selectDate; %> <script type="text/javascript"> var map; function initialize() { // 百度地图API功能 map = new BMap.Map("map_canvas"); map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件 map.addControl(new BMap.ScaleControl()); // 添加比例尺控件 map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件 map.enableScrollWheelZoom(); //启用滚轮放大缩小 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.centerAndZoom(new BMap.Point(108.953456, 34.275799),15); getMarkerArr(map); } function getMarkerArr(map) { $.ajax({ type: 'POST', url: '../../../servlet/ajax', data: {cmd:"ajax",method:"com.happysys.fatedgar.GetJson.getJsonOfRoute",p:"<%=pp%>"}, success: function(data){ if(data=="[]") alert("<%=selectDate%>没有数据!"); showToolAutoDef(map,data); } }); } var markerArray = new Array(); function showToolAutoDef(map,data) { var myobj=eval(data); var points = new Array(); map.centerAndZoom(new BMap.Point(myobj[1].along, myobj[1].alat),13); for(var i=0;i<myobj.length;i++){ var lat=myobj[i].alat; var lng=myobj[i].along; var war=myobj[i].war; var bat=myobj[i].bat; var temp=myobj[i].temp; var bdhm=myobj[i].bdhm; var sfzh=myobj[i].sfzh; var humidity=myobj[i].humidity; var scount=myobj[i].scount; var created_date=myobj[i].created_date; //alert(lng+" || "+lat); var point = new BMap.Point(lng,lat); var iconImg = createIcon(); if(i==0) iconImg = createStarIcon(); if(i==(myobj.length-1)) iconImg = createEndIcon(); if(war!="0") iconImg = createWarIcon(); var marker = new BMap.Marker(point,{icon:iconImg}); map.addOverlay(marker); if(i==0){ marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 } (function(){ var index = i; var _iw = createInfoWindow(i,data); var _marker = marker; _marker.addEventListener("click",function(){ this.openInfoWindow(_iw); }); })() points.push(point); } //alert("points长度:"+points.length); drawPolyline(map, points); } /** * 画线 * @param bMap * @param points */ function drawPolyline(bMap, points) { if (points==null || points.length<=1) { return; } bMap.addOverlay(new BMap.Polyline(points, { strokeColor : "red", strokeWeight : 3, strokeOpacity : 0.5 })); // 画线 } //创建一个Icon function createIcon(){ var icon = new BMap.Icon("../../images/user.png", new BMap.Size(16, 16), {anchor: new BMap.Size(5, 20)}); return icon; } function createWarIcon(){ var icon = new BMap.Icon("../../images/rss.png", new BMap.Size(20, 20), {anchor: new BMap.Size(5, 20)}); return icon; } function createStarIcon(){ var icon = new BMap.Icon("../../images/forward.png", new BMap.Size(20, 20), {anchor: new BMap.Size(5, 20)}); return icon; } function createEndIcon(){ var icon = new BMap.Icon("../../images/closed.png", new BMap.Size(20, 20), {anchor: new BMap.Size(5, 20)}); return icon; } //创建InfoWindow function createInfoWindow(i,data){ var myobj=eval(data); var lat=myobj[i].alat; var lng=myobj[i].along; var war=myobj[i].war; var bat=myobj[i].bat; var temp=myobj[i].temp; var bdhm=myobj[i].bdhm; var sfzh=myobj[i].sfzh; var humidity=myobj[i].humidity; var scount=myobj[i].scount; var created_date=myobj[i].created_date; if(war!="0"){ war="<font color='red'><b>请注意!老人已摔倒!</b></font>"; }else{ war="<font color='green'>正常。</font>"; } if(scount=="") scount=0; var iw = new BMap.InfoWindow("<div class='marker_content'><font size=2>" +"时 间: "+created_date+"<br>" +"提 醒: "+war+"<br>" +"经 纬 度: ("+lng+","+lat+")<br>" +"剩余电量: "+bat+"%<br>" +"湿 度: "+temp+"%rh<br>" +"温 度: "+temp+"℃<br>" +"绑定号码: "+bdhm+"<br>" +"已行走步数: "+scount+" 步<br>" +"</font></div>" +"<br>"); return iw; } function updateAct(){ getMarkerArr(); } setInterval("updateAct();",300000); </script> </head> <body οnlοad="initialize()"> <input id="sfzh" name="sfzh" type="hidden" value="<%=sfzh%>" /> <div id="map_canvas" style="width: 100%; height: 100%;"></div> </body> </html>
下面是service端代码
package com.happysys.fatedgar;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Calendar;
import org.codehaus.jettison.json.JSONArray;
import org.codehaus.jettison.json.JSONObject;
import com.happysys.erp.webapps.util.DBResultSet;
import com.happysys.erp.webapps.util.Util;
public class GetJson {
public static String getJsonOfRoute(String pp){
StringBuffer sb=new StringBuffer();
try{
String pps[]=Util.parseList(pp, "|");
String sfzh=pps[0];
String selectDate=pps[1];
//sfz="61010219910604367X";
//selectDate="2014-05-10";
if("".equals(selectDate)){
Calendar cal=Calendar.getInstance();
int year = cal.get(Calendar.YEAR); //获取年
int month = cal.get(Calendar.MONTH) + 1; //获取月份,0表示1月份
int day = cal.get(Calendar.DAY_OF_MONTH); //获取当前天数
selectDate=year + "-" + month + "-"+ day;
}
DBResultSet rs1 = new DBResultSet();
String sql="select id,key1,war,bat,temp,bdhm,sfzh,humidity,scount,alat,along,created_date from stepcount where sfzh='"+sfzh+"' and created_date between to_date('"+selectDate+" 00:00:00','yyyy-mm-dd HH24:MI:SS') and to_date('"+selectDate+" 23:59:59','yyyy-mm-dd HH24:MI:SS') order by created_date desc";
ResultSet rs = rs1.select(sql, new Object[]{}, 0,0);
JSONArray jsonarr=new JSONArray();
while(rs.next()) {
String id = Util.NVLL(rs.getString(1));//主键
String key1 = Util.NVLL(rs.getString(2));//KEY
String war = Util.NVLL(rs.getString(3));//报警状态
String bat = Util.NVLL(rs.getString(4));//电池电量
String temp = Util.NVLL(rs.getString(5));//产品温度
String bdhm = Util.NVLL(rs.getString(6));//绑定号码
String sfzh1 = Util.NVLL(rs.getString(7));//身份证号码
String humidity = Util.NVLL(rs.getString(8));//湿度
String scount = Util.NVLL(rs.getString(9));//步数
String alat = Util.NVLL(rs.getString(10));//纬度坐标(默认)
String along = Util.NVLL(rs.getString(11));//经度坐标(默认)
//String coord=CoordChange.CChange(along, alat,"0","4");
String coord=CoordChange.Gps2Baidu(along, alat);//gps坐标转换百度
String coords[]=Util.parseList(coord, "|");
along=coords[0];
alat=coords[1];
String created_date = Util.NVLL(rs.getString(12));//时间
try{
JSONObject json=new JSONObject();
json.put("id", id);
json.put("key1", key1);
json.put("war", war);
json.put("bat", bat);
json.put("temp", temp);
json.put("bdhm", bdhm);
json.put("sfzh", sfzh1);
json.put("humidity", humidity);
json.put("scount", scount);
json.put("alat", alat);
json.put("along", along);
json.put("created_date", created_date);
jsonarr.put(json);
}catch(Exception e1){
e1.printStackTrace();
}
}
sb.append(jsonarr);
rs.close();
rs1.close();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return sb.toString();
}
}
备注:
其中一些方法就没有贴出来了。大致的处理结果大家都能猜到,方法中的:
Util.parseList(pp, "|");这个处理的结果是已“|”分隔String。
String coord=CoordChange.Gps2Baidu(along, alat);这个方法可以查阅:
经纬度转换(gps|百度|google)http://fatedgar.iteye.com/admin/blogs/2068259