1.MySQL设计
2.java
@RequiresPermissions("system:lmonitor:list")@PostMapping("/list")@ResponseBodypublic TableDataInfo list(LstMonitor lstMonitor){startPage();List<LstMonitor> list = lstMonitorService.selectLstMonitorList(lstMonitor);return getDataTable(list);}
3.js
<script th:inline="javascript">var mapList =[];var prefix = ctx + "system/lmonitor";$.ajax({url: prefix + "/list",async: false,type: 'POST',dataType: 'json',data : null,success: function (data){mapList = data['rows'];}});var map = new BMap.Map('container'); // 创建地图实例var center = new BMap.Point(121.18720385246547,31.28460823015341); // 设置中心点map.centerAndZoom(center, 100); // 初始化地图， 设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用map.enableKeyboard(true); //启用键盘操作，默认禁用。map.enableDragging(); //启用地图拖拽，默认启用map.enableDoubleClickZoom(); //启用双击放大，默认启用map.addControl(new BMap.NavigationControl()); //平移缩放控件map.addControl(new BMap.ScaleControl()); //比例尺控件var markers = new Array();var contents = new Array();var points = new Array();var infos = new Array();var infoWindows = new Array();for (var i = 0; i < 4; i++) {var resolution = 10000000;var longitude = mapList[i]['longitude'] / resolution;var latitude = mapList[i]['latitude'] / resolution;var devId = mapList[i]['devId'];var opt = {width: 200, height: 100, title: "背景OBU"}; // 创建信息窗口points[i] = new BMap.Point(longitude,latitude); // 设置中心点markers[i] = new BMap.Marker(points[i]);map.addOverlay(markers[i]);infos [i] = "<font color='#f10'>设备ID：" + devId + "</font><br>经度：" + longitude + "<br>纬度：" + latitude;infoWindows [i] = new BMap.InfoWindow(infos[i], opt);mark_point(infoWindows[i],points[i]);};function mark_point(infoWindow,point){markers[i].addEventListener('click', function(){this.openInfoWindow(infoWindow,point);});}</script>
