百度地图获取数据库点的坐标，并定时刷新到页面上，功能一
2016-12-16 17:25
453 查看
后台代码
先创建marker点的实体类（并利用Spring注解功能实现自动自动建表）
DAO层代码
xml文件
service层
前台页面jsp
以上实现了输入点经纬度在页面上显示出来，根据数据库marker点的坐标，定时刷新在页面上。
先创建marker点的实体类（并利用Spring注解功能实现自动自动建表）
package com.sdtg.ditu.bean;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.Table;
import org.hibernate.annotations.GenericGenerator;
@Entity
@Table(name = "ditu") // 映射数据库中表的表名
public class Ditu {
@Id
@Column(name = "d_id") //映射company表的c_id列
@GenericGenerator(name = "idGenerator", strategy = "identity")//name属性指定生成器名称，strategy属性指定具体生成器的类名。
@GeneratedValue(generator = "idGenerator")
private Integer id;//主键
@Column(name = "d_jd")
private double jd;//经度
@Column(name = "d_wd")
private double wd;//纬度
public Ditu() {
super();
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public double getJd() {
return jd;
}
public void setJd(double jd) {
this.jd = jd;
}
public double getWd() {
return wd;
}
public void setWd(double wd) {
this.wd = wd;
}
}DAO层代码
package com.sdtg.ditu.dao;
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Repository;
import com.sdtg.ditu.bean.Ditu;
@Repository
public interface DituDao {
/**
* 添加
* @param map
*/
public void add(Ditu ditu);
/**
* 查询
*/
public List<Ditu> find(Map<String, Object> map);
}xml文件
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sdtg.ditu.dao.DituDao">
<!-- 字段 -->
<sql id="field">
d.d_id as 'id',
d.d_jd as 'jd',
d.d_wd as 'wd'
</sql>
<!-- 添加 -->
<insert id="add" parameterType="Ditu" keyProperty="id">
insert into ditu(
d_jd,
d_wd
)values(
#{jd},
#{wd}
)
</insert>
<!-- 查询 -->
<select id="find" parameterType="Map" resultType="Ditu">
select <include refid="field"/>
from ditu d
where 1 = 1
order by d.d_id
</select>
</mapper>service层
package com.sdtg.ditu.service;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.sdtg.ditu.bean.Ditu;
import com.sdtg.ditu.dao.DituDao;
import com.sdtg.user.bean.User;
@Service
@Transactional
public class DituService {
@Resource
private DituDao dao;
/**
* 添加
* @param map
*/
public Boolean add(Ditu ditu){
try {
dao.add(ditu);
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 查询
* @param map
* @return
*/
public List<Ditu> find(Map<String, Object> map){
try {
return dao.find(map);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
}前台页面jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>地图</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0px;padding:0px}
#container{height:90%}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BSKHkddrAesvEXNXQFHaZEW0Ws5NoiDP">
</script>
<script type="text/javascript">
var markers = [];
$(document).ready(function() {
getdata();
initMap();
setInterval("frash()",3000);
});
function frash(){
map.clearOverlays();//清空地图上标注点
getdata();
addMapOverlay();
markers.splice(0,markers.length);//清空数组
}
function getdata(){
$.ajax({
url:"dituList.do",
type:"post",
success:function(data){
$.each(data,function(i,d){
markers[i]={position:{lat:d.jd,lng:d.wd}};
});
}
});
}
</script>
</head>
<body>
<!-- <form action="dituSave.do" method="post">
<div class="form-group">
<label>经度</label>
<input name="jd" type="text" id="jd" placeholder="请输入经度" class="form-control" style="width:40%">
</div>
<div class="form-group">
<label>纬度</label>
<input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="width:40%">
</div>
<div>
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit" style="margin-right:60%"><strong>定位</strong>
</button></div>
</form>
-->
<!--百度地图容器-->
<div style="width:100%;height:100%;border:#ccc solid 1px;font-size:12px" id="map"></div>
</body>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
//alert("111"+markers[1].position.lat);
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMapOverlay();//向地图添加覆盖物
}
function createMap(){
map = new BMap.Map("map"); //建树Map实例
map.centerAndZoom(new BMap.Point(118.059014,36.812474),13);// 建树点坐标,初始化地图,设置中心点坐标和地图级别。
}
function setMapEvent(){
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableKeyboard();//启用键盘上下左右键移动地图
map.enableDragging(); //启用地图拖拽事件，默认启用(可不写)
map.enableDoubleClickZoom()//启用鼠标双击放大，默认启用(可不写)
}
function addClickHandler(target,window){
target.addEventListener("click",function(){
target.openInfoWindow(window);
});
}
//设置点Icon
function addMapOverlay(){
//alert(markers.length+"22222");
//alert(markers[1].position.lat+"33333");
/* var markers = [
{position:{lat:36.79,lng:118.06}},
{position:{lat:36.81,lng:118.06}},
{position:{lat:36.81,lng:118.04}},
{position:{lat:36.81,lng:118.05}}
];
alert(markers);*/
for(var index = 0; index < markers.length; index++ ){
var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25)
// imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
)});
// var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
// var opts = {
// width: 200,
// title: markers[index].title,
// enableMessage: false
// };
// var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
// marker.setLabel(label);//显示地理名称
marker.setLabel();//不显示地理名称
// addClickHandler(marker,infoWindow);
map.addOverlay(marker);
};
}
//向地图添加控件
function addMapControl(){
var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
map.addControl(scaleControl);
var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(navControl);
var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
map.addControl(overviewControl);
}
var map;
// initMap();
</script>
</html>以上实现了输入点经纬度在页面上显示出来，根据数据库marker点的坐标，定时刷新在页面上。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度地图获取数据库点的坐标，并定时刷新到页面上 jsp
- js获取前端时间方法，并且实现定时刷新页面的功能
- WEB页面接入百度地图，实现点击地图获取坐标和地址的功能
- 实现定时发送邮件功能 数据是从数据库中获取到的
- 关于使用Jquery Ajax点击checkbox 获取数据库 实现刷新当前页面
- 如何在asp.net中使用百度地图并动态获取到数据库中的坐标点进行标注
- jsp中Ajax实现不刷屏的前提下实现页面定时刷新的功能
- JS方式实现百度地图加载数据库中的坐标并实现动态刷新
- 百度地图获取数据库坐标动态生成标注和折线
- Ajax简单的页面局部刷新从数据库获取数据
- 页面定时刷新功能实现
- js实现页面定时刷新功能
- 页面定时刷新功能实现
- 2017精华版：jquery 中 ajax功能，获取数据库数据，显示在html页面 01
- JQuery条件下使用 JS方式实现百度地图加载数据库中的坐标并实现动态刷新
- 百度地图的使用之获取数据库表中信息的坐标点显示在地图上
- 页面定时刷新功能实现
- 页面定时刷新功能实现
- 可以在WinCE上实现的asp页面定时刷新
- 定时刷新页面时不让页面闪烁