附件中的地图连线.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 onload="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