从数据库读取数据，在百度地图上批量标注点

【问题描述】

最近实训做一个垃圾分类项目的一个小模块，主要通过数据库获取其中数据然后在百度地图上显示数据库中的信息，这个模块对于我来说也就是一个全新的领域，也就是要去学习百度地图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/1YZNRQNdpQ0zBOpFuJIbb_Q 密码:uvh3

https://pan.baidu.com/s/181lDEW7MJxaT7-Imf-raUA 密码:r9cj

【代码展示】

<%@ 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>

【代码讲解】

三、JS读取JAVA的变量值

var ls_City = '<%=lsCity%>';

四、JSON字符串转换为JSON对象

var objRecords1 = eval("(" + ls_City + ")");//后台数据json格式

五、显示地图

基于ECharts+百度地图开发散点扩散图

六、地图标注

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]);//在地图上批量标注
}

从数据库读取数据，在百度地图上批量标注点

猜你喜欢