百度地图获取数据库点的坐标，并定时刷新到页面上，功能一

后台代码

先创建marker点的实体类（并利用Spring注解功能实现自动自动建表）

 1 package com.sdtg.ditu.bean;
 2 
 3 import javax.persistence.Column;
 4 import javax.persistence.Entity;
 5 import javax.persistence.GeneratedValue;
 6 import javax.persistence.Id;
 7 import javax.persistence.Table;
 8 
 9 import org.hibernate.annotations.GenericGenerator;
10 
11 @Entity
12 @Table(name = "ditu") // 映射数据库中表的表名
13 public class Ditu {
14     
15     @Id
16     @Column(name = "d_id") //映射company表的c_id列
17     @GenericGenerator(name = "idGenerator", strategy = "identity")//name属性指定生成器名称，strategy属性指定具体生成器的类名。
18     @GeneratedValue(generator = "idGenerator")
19     private Integer id;//主键
20     
21     @Column(name = "d_jd")
22     private double jd;//经度
23     
24     @Column(name = "d_wd")
25     private double wd;//纬度
26     
27     public Ditu() {
28         super();    
29     }
30 
31     public Integer getId() {
32         return id;
33     }
34 
35     public void setId(Integer id) {
36         this.id = id;
37     }
38 
39     public double getJd() {
40         return jd;
41     }
42 
43     public void setJd(double jd) {
44         this.jd = jd;
45     }
46 
47     public double getWd() {
48         return wd;
49     }
50 
51     public void setWd(double wd) {
52         this.wd = wd;
53     }
54 
55     
56     
57         
58 
59 }

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点的坐标，定时刷新在页面上。

posted on 2016-12-16 17:25 周帝阅读(10105) 评论(0) 编辑收藏举报