搜索到
2
篇与
的结果
-
Springboot+LayUI使用百度地图显示多个地点 因工作业务需要，使用百度地图API，通过输入多个地点的经纬度，显示在百度地图上，并结合springboot+layui进行展示页面模板用的是freemarker。JS代码：<script type="text/javascript"> var markerArr = [ {title: "名称：宜阳恒丰园烩面馆", point: "112.182404, 34.52419", address: "宜阳县文明路恒丰园食府", tel: "未知"}, {title: "名称：宜阳钓鱼岛酒店", point: "112.194981,34.521459", address: "洛阳宜阳县城关镇红旗中路 ", tel: "未知"}, {title: "名称：宜阳锦龙喜宴酒店", point: "112.1996,34.5269", address: "宜阳县城关镇锦龙大道锦龙广场内", tel: "未知"}, {title: "名称：百姓厨房", point: "112.196712,34.521718", address: "洛阳宜阳县城关镇红旗中路与丰源路交叉口", tel: "未知"} ]; var map; //Map实例 function map_init() { map = new BMap.Map("map"); //第1步：设置地图中心点，宜阳钓鱼岛酒店 var point = new BMap.Point(112.194981, 34.521459); //第2步：初始化地图,设置中心点坐标和地图级别。 map.centerAndZoom(point, 11); //第3步：启用滚轮放大缩小 map.enableScrollWheelZoom(true); //第4步：向地图中添加缩放控件 var ctrlNav = new window.BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE }); map.addControl(ctrlNav); //第5步：向地图中添加缩略图控件 var ctrlOve = new window.BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 }); map.addControl(ctrlOve); //第6步：向地图中添加比例尺控件 var ctrlSca = new window.BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); map.addControl(ctrlSca); //第7步：绘制点 for (var i = 0; i < markerArr.length; i++) { var p0 = markerArr[i].point.split(",")[0]; var p1 = markerArr[i].point.split(",")[1]; var maker = addMarker(new window.BMap.Point(p0, p1), i); addInfoWindow(maker, markerArr[i], i); } } // 添加标注 function addMarker(point, index) { var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), { offset: new BMap.Size(10, 25), imageOffset: new BMap.Size(0, 0 - index * 25) }); var marker = new BMap.Marker(point, {icon: myIcon}); map.addOverlay(marker); return marker; } // 添加信息窗口 function addInfoWindow(marker, poi) { //pop弹窗标题 var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">' + poi.title + '<\/div>'; //pop弹窗信息 var html = []; html.push('<table cellspacing="0" style="table-layout:fixed;width:100%;font:12px arial,simsun,sans-serif"><tbody>'); html.push('<tr>'); html.push('<td style="vertical-align:top;line-height:16px;width:38px;white-space:nowrap;word-break:keep-all">地址:<\/td>'); html.push('<td style="vertical-align:top;line-height:16px">' + poi.address + ' <\/td>'); html.push('<\/tr>'); html.push('<\/tbody><\/table>'); var infoWindow = new BMap.InfoWindow(html.join(""), {title: title, width: 200}); var openInfoWinFun = function () { marker.openInfoWindow(infoWindow); }; marker.addEventListener("mouseover", openInfoWinFun); return openInfoWinFun; } //异步调用百度js function map_load() { var load = document.createElement("script"); load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init"; document.body.appendChild(load); } window.onload = map_load; </script>完成以上代码后，打开页面即可看到百度地图，已经刚刚添加4个地点，鼠标移入的时候能够展示出信息。但是这时候有一个不是很好看的地方，那就是地图左下角有一个百度地图的logo和一行文字。如何去掉呢？通过css样式隐藏掉，在 标签内添加css样式：<#-- 删除百度地图左下角的logo以及文字 --> <style type="text/css"> .BMap_cpyCtrl, .anchorBL { display: none; } </style> -
Springboot使用LayUI将Ajax发送请求获取的返回数据用ECharts图表显示 后端使用Springboot，前端框架使用LayUI，前端页面一个日期控件，一个下拉框控件，实现选择日期，以及选择下拉框，点击提交，layui发送ajax请求到后端，请求数据返回后，在控件下方用echarts图表显示出来。HTML代码：<form class="layui-form" action="/"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">选择日期</label> <div class="layui-input-inline"> <input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input date_selected"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">选择企业</label> <div class="layui-input-inline"> <select name="company_name" lay-filter="company_name" class="com_selected"> <option value=""></option> <option value="0">选项一</option> <option value="1">选项二</option> <option value="2">选项三</option> <option value="3">选项四</option> </select> </div> </div> <div class="layui-inline view_history" style="margin-left: 70px;"> <div class="layui-input-inline"> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即查看</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </div> </form>Javascript代码：<script> layui.use(['form', 'layedit', 'laydate', 'element', 'echarts', 'jquery'], function () { var form = layui.form , $ = layui.jquery , layer = layui.layer , layedit = layui.layedit , laydate = layui.laydate , element = layui.element , echarts = layui.echarts; //日期 laydate.render({ elem: '#date' }); //监听提交 var ndData = null; form.on('submit(demo1)', function (data) { var date_user = $(".date_selected").val(); var name_user = $(".com_selected").find("option:selected").text(); $.ajax({ url: "/history/getlist", type: "GET", data: { date: date_user, name: name_user }, dataType: "JSON", async: false, success: function (res) { /** * Echarts显示 */ var echartsRecords = echarts.init(document.getElementById('EchartZhu'), 'walden'); var optionRecords = { tooltip: { trigger: 'axis' }, legend: { data: ['油烟浓度', '颗粒物', '非甲烷总烃'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['周一'，'周二','周三','周四','周五','周六','周日'] }, yAxis: { type: 'value', }, dataZoom: [ { type: 'inside', show: true, top: '90%', realtime: true, start: 85, end: 100 } ], series: [{ name: '油烟浓度', type: 'line', data: res } ] }; echartsRecords.setOption(optionRecords); // echarts 窗口缩放自适应 window.onresize = function () { echartsRecords.resize(); } } }); return false; }); }); </script> 这里有一个要注意的地方就是form.on监听提交的方法里面一定要有 return false来禁用表单跳转，不然的话，点击提交以后，iframe就会跳转，我这里是变成了首页，也就是iframe里面变成了另一个刚打开的系统首页对于Echarts的引入，个人不建议使用LayUI集成的，因为我用了集成的ECharts总有各种小毛病出现，什么 EchartsTheme.js找不到等等，我当时已经将EchartsTheme.js复制到每一个可能的文件夹下都还是这样抱错。最后我是直接在要显示ECharts的页面引入，而不是在一开始的整个LayUI框架首页引入。请求API返回的是登录页刚开始，我写好接口以后，尝试着自己创造链接，没有从前端页面获取用户选择的情况下测试下接口行不行。我发现浏览器上登录系统后，再从输入链接的话是能够返回数据的。但是，我要是清楚数据，或者说没有登录的情况下去访问，系统回跳转到登录页（PS：用Postman测试的时候也是返回的登录页的HTML代码）。在我这里是因为，在Security的配置中设置了除了登录页以及静态资源外都要登录后访问，于是我修改了security的配置文件，加了一行代码 web.ignoring().mvcMatchers("/history/**");@Override public void configure(WebSecurity web) throws Exception { web.ignoring().mvcMatchers("/lib/**", "/css/**", "/js/**"); web.ignoring().mvcMatchers("/history/**"); }放行该API路径后，使用postman已经layui中用ajax发送http请求都可以获取数据，而不用先登录。（可能不安全，大家看着办）
