當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/3/13 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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><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] + "<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直方图功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Python:实现gnome sortt
下一篇： vue3中 inject provide