之前说了把百度地图引入.net网站之中的方法,那还有一个问题就是,如何把后台数据库中的位置信息传到地图页面将其显示出来呢?这就涉及到了JS与C#后台的数据交互问题了,今天我们先来简单的说一下JS对后台方法数据的调用。
1.用一个按钮控件,将把需要前台调用的方法体写入该按钮的button_click事件中
前台JS函数为:
document.getElementById("按钮ID").click(); 前台调用按钮的单击事件,间接的访问了后台的函数方法。
2.后台函数声明如下:
public string Test() { return("调用数据") } 前台在脚本中用<%=function()%>方法调用函数。如下: var a= "<%=Test()%>"; alert(a); 当然,你也阔以尝试一下,在Test函数中写入其它的处理内容,也是也可以正常执行的。
3.直接访问参数
后台设置可访问的变量,即权限设为Public,如:
public string test; 则前台在页面脚本中可以用下面的方式访问上述test参数; var a="<%=test%>";现在就可以非常方便的将后台的位置信息传递给前台地图界面显示坐标信息啦~
注:当然前后台的数据交互不要忘记我们之前说过的ajax哦~~~
小例子;
后台函数没啥,就传递了几个位置信息,不过我把多个位置信息组合了一下,压缩给了一个字符串。(我就贴一下主要代码吧,方便理解)
private StringBuilder sb_Line = new StringBuilder(); public string string_Line; //遍历DataSet集合,获取有关信息合成字符串(我的数据从数据库读出来的) //最后完成的组合形式例如:1|河北|2345,1234;2|河南|1344,7890 前台获取字符串后还需要解析的(数据是瞎写的。。。) for (int i = 0; i < ds_line.Tables[0].Rows.Count; i++) { //DataID 地点ID sb_Line.Append(ds_line.Tables[0].Rows[i][0].ToString() + "|"); //DataDesc 地点名称 sb_Line.Append(ds_line.Tables[0].Rows[i][2].ToString() + "|"); //GPS 地址坐标(经纬度)(避免多余的“;”出现) if (i == ds_line.Tables[0].Rows.Count - 1) { sb_Line.Append(ds_line.Tables[0].Rows[i][9].ToString()); } else { sb_Line.Append(ds_line.Tables[0].Rows[i][9].ToString() + ";"); } } //给string_Line赋值,待前端页面的获取 string_Line = sb_Line.ToString();
前台脚本文件,获取后台的数据解析后得到位置信息,将其在地图上一一进行展示
<script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 allmap 承载百度地图的divID map.centerAndZoom(new BMap.Point(113.270793,23.135308), 9); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("广州"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //获取后台数据拆分后等待显示 var bd_String = "<%=string_Line%>"; var bd_byte = bd_String.split(";"); //将台区地理点标注到地图上 for (var i = 0; i < bd_byte.length; i++) { var temp = bd_byte[i].split("|"); var label = new BMap.Label(temp[1], { offset: new BMap.Size(20, -10) }); label.setTitle(temp[0]); var position = temp[2].split(","); addMarker(new BMap.Point(position[0], position[1]), label); } //创建地图覆盖物和标签 function addMarker(point, label) { var marker = new BMap.Marker(point); marker.setLabel(label); map.addOverlay(marker); } </script> 嗯,大功告成~下次呢,我们来总结一下C#后台调用前台JS的函数或者参数的几种方法。祝大家的九月,充实精彩~~~