Java---（SpringBlade框架）后台从数据库读取所有点的经度和纬度，传输到前端显示在地图上

1、MySQL查询语句：


 
 
   
   
    
    
   
   
   
   
    
    
     
     pointsArr
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     ===
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     select l.gisbaidu
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     from smt_lamp l

2、控制层代码：


 
 
   
   
    
    
   
   
   
   
    
    
     
     @RequestMapping(KEY_MAIN)
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     public String index(ModelMap mm, Model model) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	String sql = Md.getSql(
     
     "location.pointsArr");
     
     //sql语句
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     @SuppressWarnings(
     
     "rawtypes")
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	List<Map> list = Db.selectList(sql);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	mm.put(
     
     "points", JsonKit.toJson(list));
     
     //java的数据类型传到js中，需要转化为JSON格式
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	mm.put(
     
     "code", CODE);
    
    
   
   

   
   
    
    
   
   
   
   
    
    	
     
     return BASE_PATH + 
     
     "location.html";
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     }

3、前端：


 
 
   
   
    
    
   
   
   
   
    
    
     
     <div id="allmap" style="width:100%; height:500px;">
     
     </div>
    
    
   
   

   
   
    
    
   
   
   
   
    
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U5IzhV77l7nd7qymfsXVK03sICNeTir2">
     
     
     
     </script>
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     <script type="text/javascript">
     
     
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	$(
     
     function(){
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     var map = 
     
     new BMap.Map(
     
     "allmap");
     
     //初始化地图
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     //var point = new BMap.Point(120.049132,31.785857);//创建点
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		map.centerAndZoom(
     
     "常州", 
     
     15);
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		map.enableScrollWheelZoom(
     
     true);
     
     // 开启鼠标滚轮缩放
    
    
   
   

   
   
    
    
   
   
   
   
    
    			
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     var points = ${points!
     
     "[]"};
     
     //坐标数组
    
    
   
   

   
   
    
    
   
   
   
   
    
    		
     
     for (
     
     var i = 
     
     0; i < points.length; i++) {
    
    
   
   

   
   
    
    
   
   
   
   
    
    			
     
     var strs = points[i].gisbaidu.split(
     
     ",");
     
     //分割为经度和纬度
    
    
   
   

   
   
    
    
   
   
   
   
    
    			
     
     var point = 
     
     new BMap.Point(strs[
     
     0], strs[
     
     1]);
     
     //创建点
    
    
   
   

   
   
    
    
   
   
   
   
    
    			
     
     var marker = 
     
     new BMap.Marker(point);
     
     //创建标注
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     			map.addOverlay(marker);
     
     //添加标注
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     		}
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     	});
    
    
   
   

   
   
    
    
   
   
   
   
    
    
     
     </script>