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", //返回数据形式为json
success: 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>
参考文档：