附件中的地图连线.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
相关推荐
读取移动端存入数据库的坐标位置信息显示在百度地图上并连线显示用户轨迹。 程序为mysql数据库，location.sql为数据库导出文件 数据库连接信息见BaiduMap\src\com\pandora\db\SqlConnection.java 运行环境：...
百度地图中动态画线， 也可以自己变通从数据库里面获取动态的点之后进行画线
百度地图长按、 地图上画线连接各点的简单demo http://blog.csdn.net/zgf1991/article/details/7551473
百度地图显示多点连线+数字标注 非常实用，我项目已经用了。大家用的好 一定要评论哦。
vue项目中：百度地图引用mapV，实现两点间的曲线，及曲线上点的流动；详解请见：https://blog.csdn.net/Hei_lovely_cat/article/details/106919514
NULL 博文链接：https://xiaoqiufeng.iteye.com/blog/2313223
主要为大家详细介绍了微信小程序地图实现展示线路，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html页面调用百度的地图，显示指定坐标点并提示坐标点信息，自己可以在里面将JavaScript里面的代码剪切创建单独的js调用。
（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: ‘********************',/...
百度地图，实现GPS轨迹绘制 实现思路： 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现，Polyline（折线）绘制轨迹，Marker（图标）绘制小车图标 3.将每两个坐标间连线起来，形成连贯的轨迹线路 ...
做 gis 项目的朋友应该对 OpenLayer 都很熟悉了， OpenLayer 是一款可以做离线地图的开源 gis 库，能让我们方便的基于离线瓦片做离线地图； 虽然有很多优点，但是其并没有像 百度、搞的一样提供内部带箭头线条的绘制...