百度地图上显示数据库数据

最新推荐文章于 2024-07-26 14:20:58 发布

weixin_44268904

最新推荐文章于 2024-07-26 14:20:58 发布

阅读量3.2k

点赞数 5

文章标签：数据库 java jsp json

本文链接：https://blog.csdn.net/weixin_44268904/article/details/106724071

版权

毕设遇到的问题，实现把数据库中的数据在地图上显示。（经纬度的定位和数据显示）
在这里插入图片描述

数据库

id 编号
lgn 经度
lat 纬度
date 时间
temp 温度
humi 湿度
ph
Uid 游标设备编号

创建地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Lo4Wo614TE4gK2lBqLwAQvnfeTynevnB"></script>
<script type="text/javascript">
    var map; // 创建地图全局实例
    var ls_youbiao = '<%=lsyoubiao%>';
 //创建和初始化地图
    function load_map() {
        //从数据库查询数据，json格式
        map = new BMap.Map("main");
        var point = new BMap.Point(120.308228,31.510325);//无锡
        map.centerAndZoom(point, 12); //初始化地图,设置中心点坐标和地图级别。
        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]}));
    }

连接mysql数据库并以JSON格式保存数据（选择数据库里最新的一条数据）

String driverName = "com.mysql.jdbc.Driver";
   String url = "jdbc:mysql://localhost:3306/sa";
   String username = "root";
   String password = "";
   String lsyoubiao = "";
   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 temp,humi,ph,Uid,date,lgn,lat,max(date) from datas group by Uid";
   ResultSet rs = stmt.executeQuery(sql);
   JSONObject json = new JSONObject();
   JSONArray jsonMembers = new JSONArray();
   while (rs.next()) {
    JSONObject youbiao = new JSONObject();
    youbiao.put("temp", rs.getString(1));
    youbiao.put("humi", rs.getString(2));
    youbiao.put("ph", rs.getString(3));  
    youbiao.put("uid", rs.getString(4));
    youbiao.put("date", rs.getString(5));
    youbiao.put("lgn", rs.getString(6));
    youbiao.put("lat", rs.getString(7));
    jsonMembers.put(youbiao);
   }
   json.put("youbiao", jsonMembers);
   lsyoubiao =jsonMembers.toString();
   rs.close();
   stmt.close();
   dbConn.close();

地图显示数据

function map_tag() {
     map.clearOverlays();
        var objRecords = eval("(" + ls_youbiao + ")");//后台得到的数据包含经纬度，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);//创建信息窗口对象
               
            }
    
            map.addOverlay(points[i]);//把标记的点添加到地图上
          //添加点击事件
            (function(){
       var _json = json;
       var _iw = createInfoWindow(_json);
       var _marker = marker;
       _marker.addEventListener("mouseover",function(){
        this.openInfoWindow(_iw);
          });
      })() 
        }        
   
    }

完整代码

<%@ 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/sa";
   String username = "root";
   String password = "";
   String lsyoubiao = "";
   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 temp,humi,ph,Uid,date,lgn,lat,max(date) from datas group by Uid";
   ResultSet rs = stmt.executeQuery(sql);
   JSONObject json = new JSONObject();
   JSONArray jsonMembers = new JSONArray();
   while (rs.next()) {
    JSONObject youbiao = new JSONObject();
    youbiao.put("temp", rs.getString(1));
    youbiao.put("humi", rs.getString(2));
    youbiao.put("ph", rs.getString(3));  
    youbiao.put("uid", rs.getString(4));
    youbiao.put("date", rs.getString(5));
    youbiao.put("lgn", rs.getString(6));
    youbiao.put("lat", rs.getString(7));
    jsonMembers.put(youbiao);
   }
   json.put("youbiao", jsonMembers);
   lsyoubiao =jsonMembers.toString();
   rs.close();
   stmt.close();
   dbConn.close();
%>
<html>
<head>
 <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
<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=Lo4Wo614TE4gK2lBqLwAQvnfeTynevnB"></script>
<script type="text/javascript">
    var map; // 创建地图全局实例
    var ls_youbiao = '<%=lsyoubiao%>';
 //创建和初始化地图
    function load_map() {
        //从数据库查询数据，json格式
        map = new BMap.Map("main");
        var point = new BMap.Point(120.308228,31.510325);//无锡
        map.centerAndZoom(point, 12); //初始化地图,设置中心点坐标和地图级别。
        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_youbiao + ")");//后台得到的数据包含经纬度，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);//创建信息窗口对象
            if(json.temp<17){
            var label = new window.BMap.Label("温度异常", { 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.uid+ "</br><b>温度(℃): </b>"+ json.temp+ "</br><b>湿度（%）:</b>"+json.humi+"</br><b>PH值: </b>"+json.ph+"</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" class="btn btn-primary" type="button" id="button1" onClick="map_tag();"
   value="游标显示"
   style="width: 150px; height: 40px; margin: 0px 0px 0px 5px">
   <input name="button2" class="btn btn-primary" type="button" id="button2" onClick="window.location.href='/Bishe_Demo/A001.jsp ';"
   value="游标A001"
   style="width: 150px; height: 40px;margin: 0px 0px 0px 5px">
   <input name="button3" class="btn btn-primary" type="button" id="button3" onClick="window.location.href='/Bishe_Demo/A002.jsp ';"
   value="游标A002"
   style="width: 150px; height: 40px;margin: 0px 0px 0px 5px">
   <input name="button4" class="btn btn-primary"  type="button" id="button4" onClick="window.location.href='/Bishe_Demo/A003.jsp ';"
   value="游标A003"
   style="width: 150px; height: 40px;margin: 0px 0px 0px 5px">  
 </div>
 <hr>
 <div id="main"></div>
</body>
</html>

代码仅供参考！！！

weixin_44268904

关注

5
点赞
踩
52

收藏

觉得还不错? 一键收藏
1
评论
百度地图上显示数据库数据

**百度地图上显示数据库数据**毕设遇到的问题，实现把数据库中的数据在地图上显示。（经纬度的定位和数据显示）数据库id 编号lgn 经度lat 纬度date 时间temp 温度humi 湿度phUid 游标设备编号创建地图<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Lo4Wo614TE4gK2lBq
复制链接

扫一扫