SpringBoot+Hibernate+JPA实现百度地图定位实例
小编是使用SpringBoot+JPA+实现一个百度地图定位
第一步：创建SpringBoot项目：
第二步导入依赖：
数据库驱动包：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.vaadin.external.google</groupId>
<artifactId>android-json</artifactId>
<version>RELEASE</version>
<scope>compile</scope>
</dependency>
</dependencies>
创建实体类：
@Entity //JPA语法告诉软件这是个实体类
@Table(name = "gonghuoshang") //对应数据库表名
public class Gonghuoshang implements Serializable {
@Id//主键id
@GeneratedValue(strategy = GenerationType.IDENTITY) //我使用mysql数据库所有带自增
private Integer id;
@Column(name = "Name") //对应数据库表中的列名
private String name;
@Column(name = "Phone")
private String phone;
@Column(name = "Address")
private String address;
@Column(name = "JinYong")
private String JinYong;
@Column(name = "MoRen")
private String moRen;
创建Dao
继承上面类
Dao创建完成之后–创建业务逻辑层：
实现业务逻辑层，下面是常用的增删查改
@Service
public class ShangPin_Serviceimpl implements ShangPin_Service {
@Autowired //自动装配
private BrandRepository brandRepository;
/**
* 查询全部
*/
public List<Gonghuoshang> getAll() {
return brandRepository.findAll(); //不用自己写selec语法，框架自动完成语法findAll()查询全部方法
}
/**
* 查询单条全部
*/
public Gonghuoshang getByid(Integer id) {
return brandRepository.findById(id).get(); //框架自带语法findById()根据id查询方法
}
/**
* 新增
*/
public void sava(Gonghuoshang gonghuoshang) {
brandRepository.save(gonghuoshang); //框架自带语法findById()根据新增方法
}
创建controller控制器：
页面使用bootstrapTable表格请求数据：
引入css,js
引入Css,Js包
<link rel="stylesheet" th:href="@{/static/bootstrap-table/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/static/bootstrap-table/bootstrap-table.min.css}">
<script th:src="@{/static/bootstrap-table/jquery.min.js}"></script>
<script th:src="@{/static/bootstrap-table/bootstrap.min.js}"></script>
<script th:src="@{/static/bootstrap-table/bootstrap-table.min.js}"></script>
<script th:src="@{/static/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的**"></script>
http://lbsyun.baidu.com/jsdemo.htm#a1_2 //这是百度实例官网
静态资源：
编写js
<script>
var $tables = $('#tables');
$(function () {
$tables.bootstrapTable({
classes:'table table-bordered table-hover',
striped:true,
columns:[
{
checkbox:true,
},{
title:'主键/编号',
field:'id',
align:'center'
},{
title:'名字',
field:'name',
align:'center'
},{
title:'手机号',
field:'phone',
align:'center'
},{
title:'地址',
field:'address',
align:'center'
},{
title:'状态',
field:'jinYong',
align:'center',
},{
title:'默认',
field:'moRen',
align:'center'
},{
title:'地址定位',
align:'center',
formatter:function(value,row,index){
return "<button class='btn btn-primary'data-toggle='modal' data-target='#myModal' onclick=dingwei('"+row.address+"'//row.address意思是：获得表格数据)><span class='glyphicon glyphicon-map-marker'></span> 定位</button>";
}
}
],
url:'shangpin/table_list', //请求控制器路径
method:'post',
detailView:true,
dataType:'json',
idField:'id',
contentType:'application/x-www-form-urlencoded',
sidePagination:'server',
pagination:true,
pageSize:10,
async:false,
pageList:[1,2,5,10,20],
pageNumber:1,
toolbar:'#toolbar',//工具栏
})
});
function dingwei(address) { //接受数据
// 百度地图API功能
var map = new BMap.Map("allmap"); // 创建Map实例
map.centerAndZoom(new BMap.Point(114.48269393,36.60930793)); // 初始化地图,设置中心点坐标和地图级别
//添加地图类型控件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
// map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显示在地图上,并调整地图视野
myGeo.getPoint(address //传参到这里, function(point){
if (point) {
map.centerAndZoom(point, 16);
map.addOverlay(new BMap.Marker(point));
}else{
alert("您选择地址没有解析到结果!");
}
}, "邯郸市");
}
</script>