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


    后台代码

    先创建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="40%">
    </div>
                                        
    <div class="form-group">
    <label>纬度</label>
    <input name="wd" type="text" id="wd" placeholder="请输入纬度" class="form-control" style="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="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 = {
            //   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点的坐标,定时刷新在页面上。

  • 相关阅读:
    ConcurrentHashMap之实现细节
    Java 开发 2.0: 用 Hadoop MapReduce 进行大数据分析
    mapreduce从wordcount开始
    centos 5.5 安装mysql 5.5 全程详细记录 RPM方式安装
    使用GDAL工具对OrbView3数据进行正射校正
    centos 5.5 mysql5.5 乱码
    netty vs mina netty和mina的区别
    VC欣赏、家人是阻力,极客化、国际化——90后创业生态
    悲惨而又丢人的创业经历:草根创业者含恨倾诉为什么失败
    悲惨而又丢人的创业经历:草根创业者含恨倾诉为什么失败
  • 原文地址:https://www.cnblogs.com/zhoudi/p/6187775.html
Copyright © 2020-2023  润新知