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

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

下面是一个简单Demo。

效果如下:
SSM框架中实现地图查询及ECharts直方图功能_第1张图片
后面会将代码整理放在github。

jsp文件如下:


<%@ 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>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts.common.min.js">script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js">script>
head>

<body>
	
	<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] + "
"
+ "坐标:" + 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 : "

信息窗口

"
, // 信息窗口标题 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>

参考文档:

ECharts官方文档

百度地图API示例

你可能感兴趣的:(Java,地图查询,ECharts)