【Web】ajax strut2 js联合使用，配置百度地图

来源：互联网发布：having sql 编辑：程序博客网时间：2024/06/13 07:01

项目目的：在百度地图上显示在数据库中储存的相关信息

相关配置：

1、构造一个用于接收地图显示信息的Bean:MapshowBean.java

package com.ev.domain;public class MapshowBean {private  double lng;      private  double lat;private  String state;private int label;        //lng,lat在数据库中没有定义，临时做一下运算public MapshowBean(int label, String state){this.label = label;this.state = state;if(label == 1){this.lng = 119.9636;this.lat = 31.76275;}else{this.lng = 119.9620;this.lat = 31.76280;}}//getter()/setter()}

2、控制类ACTION中写入访问数据库的部分，将访问结果放在一个list中，等待前台Ajax接收：MapActionAll.java

package com.ev.action;//import@Controller@Scope("prototype")public class MapActionAll {@ResourceBoxBiz boxBiz;MapActionAll(){ApplicationContext con = new ClassPathXmlApplicationContext("applicationContext.xml"); boxBiz = (BoxBiz)con.getBean("boxBizImpl");}//返回的listprivate Map<String,Object>  list = new HashMap<String, Object>();public Map<String,Object> getList() {return list;}public String getmap(){List<MapshowBean> boxstate_list = new ArrayList<MapshowBean>();List<Box> boxlist2 = boxBiz.getall();Iterator<Box> iterator2 = boxlist2.iterator();while(iterator2.hasNext()){Box data = iterator2.next();int label = data.getLabel();String state = data.getState();MapshowBean boxbean = new MapshowBean(label, state); boxstate_list.add(boxbean);}list.put("boxes", boxstate_list);return "myJson";}}

3、特别的，在strut2的配置文件中做出如下配置：struts.xml

<package name="useServletApi2" namespace="/"  extends="json-default"><action name="map_*" class="mapActionAll" method="{1}">         <!-- 以json方式序列化输出的值 -->            <result name="myJson" type="json">          <!-- 是否去掉返回值为NULL的properties -->            <param name="excludeNullProperties">false</param>         <!-- 这里指定将被Struts2序列化的变量名，该属性在action中必须有对应的getter方法 -->                <param name="root">list</param>            </result>         </action></package>

4、前台使用Ajax访问数据库：map.html

<script type="text/javascript">                         var map = new BMap.Map("map_canvas");          // 创建地图实例                         var point = new BMap.Point(119.96346, 31.76265);  // 创建点坐标                         map.centerAndZoom(point, 15);                 //                         map.enableScrollWheelZoom(); // 允许滚轮缩放                         box_data =  [];//ajax:查询数据库，在地图上显示            $.ajax({                   url : 'map_getmap.action',                   type : 'get',                   dataType : 'text',                   error : function(XMLHttpRequest,                                    textStatus, errorThrown) {                   // 打印错误信息                   alert("error");                   alert('XMLHttpRequest.status'                         + XMLHttpRequest.status);                   alert('XMLHttpRequest.readyState'                         + XMLHttpRequest.readyState);                   alert('textStatus' + textStatus);                   },                                      success : function(data) {                   // alert(data);// data数组字符串 转化为 data 数组var obj2 = eval("(" + data + ")");data_info = obj2;if(data == null){alert('没有数据');}   box_data = obj2.Boxes;//alert('data is ' + data);if(box_data.length==0 ){// alert("数据为空");}else{//alert("查询成功");}for(var i=0;i<box_data.length;i++){var tpoint = new BMap.Point(box_data[i].lng, box_data[i].lat);  // 创建点坐标    var marker = new BMap.Marker(tpoint);     map.addOverlay(marker);              // 将标注添加到地图中    var string = "垃圾桶编号："+box_data[i].label+",垃圾桶状态："+box_data[i].state;    var label = new BMap.Label(string,{position:tpoint});    marker.setLabel(label);}                                                        }                                      });                                       </script>

1、在JS中使用Ajax的方法：正则表达式详见http://www.cnblogs.com/tylerdonet/p/3520862.html

2、在JS中处理JSON的方法：

var obj2 = eval("(" + data + ")");//将字符串格式转为数组格式var box_data = obj2.Boxes;//将数组中在Action中放入的某JSON序列取出来for(var i=0;i<box_data.length;i++){//遍历每一个JSONvar tpoint = new BMap.Point(box_data[i].lng, box_data[i].lat);  // 创建点坐标var marker = new BMap.Marker(tpoint); map.addOverlay(marker);              // 将标注添加到地图中var string = "垃圾桶编号："+box_data[i].label+",垃圾桶状态："+box_data[i].state;var label = new BMap.Label(string,{position:tpoint});marker.setLabel(label);}

0 0