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

最新推荐文章于 2023-01-19 16:11:38 发布

feng_zhiyu

最新推荐文章于 2023-01-19 16:11:38 发布

阅读量2.1k

点赞数 3

分类专栏： Java 文章标签：地图查询 ECharts

本文链接：https://blog.csdn.net/feng_zhiyu/article/details/88072864

版权

Java 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

最近一个项目【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>

参考文档：

ECharts官方文档

百度地图API示例

feng_zhiyu

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
SSM框架中实现地图查询及ECharts直方图功能

最近一个项目【SSM框架搭建后台】中需要在地图中显示检测点以及以直方图的形式展示mysql数据库中的数据。下面是一个简单Demo。效果如下：后面会将代码整理放在github。jsp文件如下：&amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loo...
复制链接

扫一扫