百度地图获取数据库点的坐标,并定时刷新到页面上,功能一
后台代码
先创建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 dwhere 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 {@Resourceprivate 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);});}//设置点Iconfunction 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点的坐标,定时刷新在页面上。
转载于:https://www.cnblogs.com/zhoudi/p/6187775.html
百度地图获取数据库点的坐标,并定时刷新到页面上,功能一相关推荐
- 百度地图获取数据库点的坐标,并定时刷新到页面上 jsp
前台JSP页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- vue使用百度地图获取可视区域四角坐标(百度地图四角坐标,百度地图3D可视区域四角坐标)
百度地图api只提供了左下角和右上角两个坐标,左上角坐标和右下角坐标需要自己操作获取,方法如下: 地图自带获取坐标的方法:var bounds = map.getBounds(); //获取地图可视区 ...
- 百度地图获取数据库经纬度进行地图标点(django)
一.views.py中写个loadpoint的方法 def loadpoint(request):response={}try:loadpoint=models.Potsc.objects.all() ...
- 根据ip获取经纬度_PHP使用百度地图获取指定地址坐标:创建AK(图文+视频)
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之创建AK(api key)的方法. 我们在前面的文章[PHP使用腾讯地图获取指定地址坐标:创建key][PHP使用腾讯地图获取指定地址坐标:经 ...
- 根据php经纬度百度地图打点,PHP使用百度地图获取指定地址坐标:经纬度(图文+视频)...
本篇文章主要给大家介绍PHP使用百度地图获取指定地址坐标之经纬度的实现方法. 在之前的文章[PHP使用百度地图获取指定地址坐标:创建AK]中,已经给大家介绍了如何在百度地图开放平台中创建AK(api ...
- 百度地图 获取两坐标点之间的驾车路线所有坐标
百度地图 获取两坐标点之间的驾车路线所有坐标 <html><head><meta http-equiv="Content-Type" content= ...
- android 百度地图拖动定位,百度地图获取定位,实现拖动marker定位,返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...
- android百度地图定位自定义图标,百度地图SDK集成及根据坐标实现定位(android studio开发)...
百度地图SDK集成及根据坐标实现定位(android studio开发) 百度地图SDK集成及根据坐标实现定位(android studio开发) 1.下载百度地图SDK 链接:http://lbsy ...
- PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例
PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 原文:PHP+百度地图API+JAVASCRIPT实现GPS坐标与百度坐标转换的实例 <!--小幅的坐标转换点位程 ...
最新文章
- 北欧小国的宏大AI实验:让1%的人口接受人工智能培训
- 采用 opencv surf 算子进行特征匹配
- 打开了悬浮窗权限但是没有_给你的手机添加“樱花雨”特效,打开手机樱花就满屏飘落,漂亮!...
- python程序结构有哪几种_三、python程序结构之分支结构
- 在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
- 显式调用构造函数产生的悲剧
- 大萧条时期什么行业走俏_大流行时期的用户体验
- 微信小程序启动、更新机制
- RPMB原理介绍【转】
- php 微信pic_url,一段代码实现微信公众号开发校园图书馆
- 李少华 linux内核,腾讯云CMQ消息队列在Linux环境下的使用
- 关于Redis的概念
- 生成对抗网络(十)----------infoGAN
- hiveserver2启动后beeline无法连接:root is not allowed to impersonate hah
- 第八篇《高速铁路钢轨光带检测系统》论文阅读笔记
- android 呼吸灯,十三种呼吸灯交互触控体验_手机_手机Android频道-中关村在线
- 电驴服务器搜索文件排序,【图文教程】搜索功能使用全解
- iOS开发者对苹果公司发起集体诉讼 指控其违反竞争法
- jmq java_互联网+技术 | 京东消息中间件JMQ的演进
- 【卡拉兹猜想】:对于一个自然数n,如果他是偶数,那么把它砍掉一半;如果是奇数,那么把(3n+1)砍掉一半,一直反复下去,最后在某一步得到n=1。求从n计算到1的步数