【问题描述】
最近实训做一个垃圾分类项目的一个小模块,主要通过数据库获取其中数据然后在百度地图上显示数据库中的信息,这个模块对于我来说也就是一个全新的领域,也就是要去学习百度地图API,刚开始一脸懵逼无从下手,刚开始我负责获取当地经纬度,后来计划有变要我去做一个对于我这种初学者是有点难度,难在于你遇到问题不知道从哪里下手,在后面自己坚持不懈才有了那么点小收获。
【效果展示】
【相关技术】
JSP,JDBC,JSON,JS,百度地图API
【数据库字段设计】
数据库名:baiduMap
表名:bin
数据库字段
自定义数据库内容
1 100 20 114.399 27.811 1 已满 500
2 82 20 113.962 25.411 未满 1000
3 200 50 116.463 39.924 将满 800
4 150 70 114.025 22.551 未满 1500
【所需要的jar包】
json架包 : https://pan.baidu.com/s/1MxjkjQMj5W2E4vlYycZtyw (这个失效链接在评论区)
【代码展示】
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.sql.*"%>
<%@ page import="org.json.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
String driverName = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://localhost:3306/baidumap";
String username = "root";
String password = "1111";
String lsCity = "";
Connection dbConn;
Class.forName(driverName);
dbConn = DriverManager.getConnection(url, username, password);
Statement stmt = dbConn
.createStatement(ResultSet.TYPE_SCROLL_SENSITIVE,
ResultSet.CONCUR_UPDATABLE);
String sql = "select maxsize,r_num,lat,lgn,flag,price from bin ";
ResultSet rs = stmt.executeQuery(sql);
JSONObject json = new JSONObject();
JSONArray jsonMembers = new JSONArray();
while (rs.next()) {
JSONObject city1 = new JSONObject();
city1.put("maxsize", rs.getString(1));
city1.put("r_num", rs.getString(2));
city1.put("lat", rs.getString(3));
city1.put("lgn", rs.getString(4));
city1.put("flag", rs.getString(5));
city1.put("price", rs.getString(6));
jsonMembers.put(city1);
}
json.put("city", jsonMembers);
lsCity =jsonMembers.toString();
rs.close();
stmt.close();
dbConn.close();
%>
<html>
<head>
<base href="<%=basePath%>">
<title>在地图上批量标注</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html {
height: 100%
}
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height: 100%;
margin: 0px;
padding: 0px;
}
#menu {
padding: 5px 0px 0px 0px;
width: 100%;
height: 7%;
}
#main {
width: 100%;
float: left;
position: fixed;
height: 87%;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=uQQtqikbvFwtFdK9wGKn2RkEUkYkA552">
</script>
<script type="text/javascript">
var map; // 创建地图全局实例
var ls_City = '<%=lsCity%>';
//创建和初始化地图
function load_map() {
//从数据库查询数据,json格式
map = new BMap.Map("main");
var point = new BMap.Point(114.398893, 27.811062);//北京
map.centerAndZoom(point, 7); //初始化地图,设置中心点坐标和地图级别。
map.enableScrollWheelZoom(true); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl());//向地图中添加缩放控件
var ctrlSca = new window.BMap.ScaleControl({
anchor: BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(ctrlSca);//比例尺
//地图、卫星、混合模式切换
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP]}));
}
function map_tag() {
map.clearOverlays();
var objRecords = eval("(" + ls_City + ")");//后台得到的数据包含经纬度,json格式的
var points = new Array();//存放标注点经纬信息的数组
for ( var i = 0; i < objRecords.length; i++) {
var json = objRecords[i];
var p0 = json.lat;
var p1 = json.lgn;
var point = new BMap.Point(p0,p1);//循环生成新的地图点
var marker = new BMap.Marker(point);//按照地图点坐标生成标记
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
var iw = createInfoWindow(i);//创建信息窗口对象
var label = new window.BMap.Label("申购价格:"+json.price+"元/月", { offset: new window.BMap.Size(20, -10) });
marker.setLabel(label);//显示marker的title
points.push(marker);
map.addOverlay(points[i]);//把标记的点添加到地图上
//添加点击事件
(function(){
var _json = json;
var _iw = createInfoWindow(_json);
var _marker = marker;
_marker.addEventListener("mouseover",function(){
this.openInfoWindow(_iw);
});
})()
}
}
//创建InfoWindow
function createInfoWindow(json){
var opts1 = {title : '<span style="font-size:20px;color:#0A8021">垃圾箱信息</span>'};
var iw = new BMap.InfoWindow("<div style='line-height:1.8em;font-size:12px;'><b>最大垃圾箱个数: </b>"+ json.maxsize+ "</br><b>可用垃圾箱个数:</b>"+json.r_num+"</br><b>垃圾箱状态: </b>"+json.flag+"</br></a></div>", opts1);
return iw;
}
//异步调用百度js
function map_load() {
var load = document.createElement("script");
load.src = "http://api.map.baidu.com/api?v=1.4&callback=load_map";
document.body.appendChild(load);
}
window.onload = map_load;
</script>
</head>
<body onLoad="load_map()">
<div id="menu">
<input name="button1" type="button" id="button1" onClick="map_tag();"
value="全国垃圾箱信息查询"
style="width: 150px; height: 40px; margin: 0px 0px 0px 5px">
</div>
<hr>
<div id="main"></div>
</body>
</html>
【代码讲解】
var ls_City = '<%=lsCity%>';
四、JSON字符串转换为JSON对象
var objRecords1 = eval("(" + ls_City + ")");//后台数据json格式
五、显示地图
六、地图标注
var objRecords = eval("(" + ls_City + ")");//后台得到的数据包含经纬度,json格式的
var points = new Array();
for ( var i = 0; i < objRecords.length; i++) {
var marker = new BMap.Marker(new BMap.Point(objRecords[i].X, objRecords[i].Y));//创建标注对象
points.push(marker);
}
for ( var i = 0; i < objRecords.length; i++) {
map.addOverlay(points[i]);//在地图上批量标注
}
【2020-4-27更新】
给的很多链接总被和谐掉了,所以今天整理了下,把这个项目的源码放到网盘里去了,那个jar也在里面
资源获取方式点击这个链接垃圾分类源码,然后关注公众号,在后台回复垃圾分类