SSM框架中实现地图查询及ECharts直方图功能

最近一个项目【SSM框架搭建后台】中需要在地图中显示检测点以及以直方图的形式展示mysql数据库中的数据。

下面是一个简单Demo。

效果如下：

后面会将代码整理放在github。

jsp文件如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">body, html {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{width:50%;height:500px;float:left;margin-top:50px;}p{margin-left:5px; font-size:14px;}#main{width:50%;height:500px;float:left;margin-top:100px;}#bg{width:100%;height:100%;background-image: url("${pageContext.request.contextPath}/picture/bg.png");}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Wk9u6A7tTbX6Xsx2xG1Pl4UDZcbGhH7P" charset="UTF-8"></script><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" charset="UTF-8"></script><title>地图查询</title><!-- 引入 echarts.js --><script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js"></script><!-- 引入jquery.js --><script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="bg"><div id="main"></div><div id="allmap" ></div></div><script type="text/javascript">//百度地图API功能map = new BMap.Map("allmap");// 百度坐标系坐标(地图中需要使用这个)var bPoints = new Array();//设置中心点map.centerAndZoom(new BMap.Point(112.925998, 27.910548), 15);  //坐标中心是湖南科技大学//后台数据/* var data_info = [[116.417854,39.921988,"地址：北京市东城区王府井大街88号乐天银泰百货八层"],[116.406605,39.921585,"地址：北京市东城区东华门大街"],[116.412222,39.912345,"地址：北京市东城区正义路甲5号"]];  */var data_info = [];$(function(){$.ajax({url:"${pageContext.request.contextPath }/infoWithLoLa/getAll",type:"get",dataType:"json",success:function(result){$.each(result, function(index, item) {var arr = new Array();arr[0] = item.longitude;arr[1] = item.latitude;arr[2] = item.address;var point = new BMap.Point(arr[0], arr[1]); var content = "地址：" + arr[2] + "<br/>" + "坐标：" + arr[0] + "," + arr[1];bPoints.push(point); // 添加到百度坐标数组 用于自动调整缩放级别 var marker = new BMap.Marker(point);      // 创建标注    map.addOverlay(marker);addClickHandler(content, marker); //点击标记点，弹出信息窗口});}});});//信息窗口样式var opts = {width : 250,     // 信息窗口宽度height: 120,     // 信息窗口高度title : "<p style='color: red;'>信息窗口</p>" , // 信息窗口标题enableMessage:true//设置允许信息窗发送短息};function addClickHandler(content,marker){marker.addEventListener("click",function(e){openInfo(content,e)});}function openInfo(content,e){var p = e.target;var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow,point); //开启信息窗口}// 根据点的数组自动调整缩放级别function setZoom(bPoints) {var view = map.getViewport(eval(bPoints));var mapZoom = view.zoom;var centerPoint = view.center;map.centerAndZoom(centerPoint, mapZoom);}map.addControl(new BMap.MapTypeControl());map.enableScrollWheelZoom(true);   //开启鼠标滚轮缩放setTimeout(function () {setZoom(bPoints);}, 1000)var myChart = echarts.init(document.getElementById('main'));// 显示标题，图例和空的坐标轴myChart.setOption({title: {text: '弯道会车检测点信息'},tooltip: {},legend: {data: ['日弯道车流量']},xAxis: {data: []},yAxis: {},series: [{name: '日弯道车流量',type: 'bar',data: []}]});myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画var addresses = [];    //类别数组（实际用来盛放X轴坐标值）var nums = [];    //销量数组（实际用来盛放Y坐标值）$.ajax({type: "get",async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url: "${pageContext.request.contextPath}/getAllInfoByAddress",    //请求发送到TestServlet处data: {},dataType: "json",        //返回数据形式为jsonsuccess: function (result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for (var i = 0; i < result.length; i++) {addresses.push(result[i].address);    //挨个取出类别并填入类别数组}for (var i = 0; i < result.length; i++) {nums.push(result[i].vehicleflow);    //挨个取出销量并填入销量数组}myChart.hideLoading();    //隐藏加载动画myChart.setOption({        //加载数据图表xAxis: {data: addresses},series: [{// 根据名字对应到相应的系列name: '日弯道车流量',data: nums}]});}},error: function (errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}})
</script>
</body>
</html>

参考文档：

ECharts官方文档

百度地图API示例

SSM框架中实现地图查询及ECharts直方图功能相关推荐

ssm框架中利用pagehelper分页，完成模糊查询与select条件查询
ssm框架中利用pagehelper分页,完成模糊查询与select条件查询一.问题分析 1.1 往期回顾 pagehelper分页 https://blog.csdn.net/Jia_Peng_T ...
SSM框架中的前后端分离
认识前后端分离在传统的web应用开发中,大多数的程序员会将浏览器作为前后端的分界线.将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器,为前端提供业务逻辑和数据准备的所有代码统称为后端. ...
php中条件查询语句,thinkphp3.2框架中where条件查询用法总结
本文实例讲述了thinkphp3.2框架中where条件查询用法.分享给大家供大家参考,具体如下: thinkphp3.2 where 条件查询在连贯操作中条件where的操作有时候自己很晕,所以整 ...
SSM框架中使用Spring的@Transactional注解进行事务管理
一介绍在企业级应用中,保护数据的完整性是非常重要的一件事.因此不管应用的性能是多么的高.界面是多么的好看,如果在转账的过程中出现了意外导致用户的账号金额发生错误,那么这样的应用程序也是不可接受的 ...
SSM框架中出现的406 (Not Acceptable)
首先,需要清楚,http state 406代表什么意思: 406是HTTP协议状态码的一种,表示无法使用请求的特性来响应请求的网页.一般指客户端浏览器不接受所请求页面的MIME类型. 出现这样的错误 ...
在ssm框架中进行删除数据是报错has an unsupported return type
项目场景: 在ssm框架中进行删除数据是报错Request processing failed; nested exception is org.apache.ibatis.binding.Bindi ...
SSM框架基于Bootstrap fileinput 实现文件上传功能
SSM框架基于Bootstrap fileinput 实现文件上传功能 pom.xml文件的配置想要实现SSM框架实现多文件上传,必要的jar包必须要在pom.xml文件中引入.如下: <! ...
SSM框架中MVC各层的作用以及运行流程
这篇博文主要介绍的是SSM(Spring.SpringMVC.Mybatis)框架中,MVC各层的作用以及各层之间的交互和框架整体运行流程. 一.MVC各层级间的作用及关系表现层(springMVC ...
ssm框架中前台html如何接受后台的数据_计算机毕业设计中实现java后台的微信小程序...
点击上方"蓝字",关注我们. 毕业设计做微信小程序+java后台.从对微信小程序一无所知到完成毕设,碰到许多问题,在跟大家分享一下自己的经历和一个小程序怎么从零开始.希望小程序初学 ...

SSM框架中实现地图查询及ECharts直方图功能

SSM框架中实现地图查询及ECharts直方图功能相关推荐

最新文章

热门文章