分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow
也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!
网上很多都是通过百度地图API调用JS的例子,并没有真正的数据库交互哦~所以我做了一个与sql server数据库交互的例子。数据库用的是sql server,大家看着自行建立数据库哦~~
首先,我们建立一个default.aspx
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2 3 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml" > 6 <head runat="server"> 7 <title>title> 8 <style type ="text/css" > 9 table { 10 border: solid 1px #999; 11 } 12 13 style> 14 <style type="text/css"> 15 html,body{margin:0;padding:0;} 16 .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} 17 .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word} 18 .auto-style1 { 19 width: 87px; 20 height: 27px; 21 } 22 .auto-style2 { 23 width: 417px; 24 height: 27px; 25 } 26 style> 27 <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf8719&v=1.1&services=true">script> 28 29 <script type ="text/javascript" > 30 function getAddr() 31 { 32 var map=document.getElementById ("dituContent"); 33 if(map.style.display=="none") 34 { 35 map.style.display="block"; 36 initMap(); 37 } 38 if(map.style.display!="none") 39 { 40 initMap(); 41 } 42 43 } 44 script> 45 head> 46 <body style ="font-size :12px"> 47 <form id="form1" runat="server"> 48 <div> 49 经:<asp:TextBox ID="lng" runat="server" style="" Width="108px" >asp:TextBox> 50 纬:<asp:TextBox ID="lat" runat="server" Width="102px" >asp:TextBox> 51 <div style =" float :left "> 52 <table style="width: 600px; height: 327px; "> 53 <tr> 54 <td style="width: 87px"> 55 名称:td> 56 <td style="width: 417px"> 57 <asp:TextBox ID="name" runat="server">asp:TextBox> 58 <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="name" 59 ErrorMessage="公司名称不能为空!" Font-Size="Small">asp:RequiredFieldValidator>td> 60 61 tr> 62 <tr> 63 <td class="auto-style1"> 64 城市:td> 65 <td class="auto-style2"> 66 <asp:DropDownList ID="city" runat="server"> 67 <asp:ListItem Value ="北京">北京asp:ListItem> 68 <asp:ListItem Value ="郑州">郑州asp:ListItem> 69 <asp:ListItem Value ="洛阳">洛阳asp:ListItem> 70 <asp:ListItem Value ="安阳">安阳asp:ListItem> 71 asp:DropDownList> 72 td> 73 tr> 74 <tr> 75 <td style="width: 87px"> 76 详细地址:td> 77 <td style="width: 417px"> 78 <asp:TextBox ID="address" runat="server" Width="299px">asp:TextBox> 79 <input id="Button2" type="button" value="在地图上标注地址" onclick ="getAddr()" />td> 80 tr> 81 82 <tr> 83 <td style="width: 87px; height: 30px;"> 84 电话:td> 85 <td style="width: 417px; height: 30px;"> 86 <asp:TextBox ID="phone" runat="server">asp:TextBox> 87 <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="phone" 88 ErrorMessage="电话不能为空!" Font-Size="Small">asp:RequiredFieldValidator> 89 td> 90 tr> 91 <tr><td colspan ="2" style="height: 38px"> 92 93 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" Width="113px" /> 94 <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="清空" Width="118px" />td>tr> 95 table> 96 97 <br /> 98 <br /> 99 100 <table >101 <%for (int i = 0; i < tb.Rows.Count; i++)102 { %>103 <tr>104 <td><%=tb.Rows[i][1].ToString() %>td>105 <td><a href ="map.aspx?id=<%=tb.Rows[i][0].ToString() %>" >查看地图a>td>106 tr>107 <%} %>108 table>109 div> 110 <div style="width:559px;height:448px;border:#ccc solid 1px; margin-left :20px; float :left ; display :none " id="dituContent">div> 111 div>112 form>113 body>114 <script type="text/javascript">115 //创建和初始化地图函数:116 function initMap(){117 createMap();//创建地图118 setMapEvent();//设置地图事件119 120 121 122 var gc = new BMap.Geocoder(); 123 map.addEventListener("click", function(e){ 124 var pt = e.point;125 gc.getLocation(pt, function(rs){126 var addComp = rs.addressComponents;127 var addr;128 addr=addComp.city + addComp.district + addComp.street + addComp.streetNumber;129 map.addOverlay(new BMap.Marker(pt));130 document.getElementById ("address").value=addr;131 document.getElementById ("lng").value=pt.lng;132 document.getElementById ("lat").value=pt.lat;133 134 }); 135 }); 136 137 }138 139 //创建地图函数:140 function createMap(){141 var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图142 // 创建地址解析器实例143 var myGeo = new BMap.Geocoder();144 // 将地址解析结果显示在地图上,并调整地图视野145 myGeo.getPoint(document.getElementById("city").value, function(point){146 if (point) {147 map.centerAndZoom(point, 14);148 149 }150 }, document.getElementById ("city").value);151 window.map = map;//将map变量存储在全局152 }153 154 //地图事件设置函数:155 function setMapEvent(){156 map.enableDragging();//启用地图拖拽事件,默认启用(可不写)157 map.enableScrollWheelZoom();//启用地图滚轮放大缩小158 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写)159 map.enableKeyboard();//启用键盘上下左右键移动地图160 161 }162 163 164 initMap();//创建和初始化地图165 script>166 html>
default.aspx.cs我们在里面这样写:
1 using System; 2 using System.Data; 3 using System.Configuration; 4 using System.Web; 5 using System.Web.Security; 6 using System.Web.UI; 7 using System.Web.UI.WebControls; 8 using System.Web.UI.WebControls.WebParts; 9 using System.Web.UI.HtmlControls;10 public partial class _Default : System.Web.UI.Page 11 {12 public DataTable tb = new DataTable();13 protected void Page_Load(object sender, EventArgs e)14 {15 if (!IsPostBack)16 {17 Bind();18 }19 20 }21 ///22 /// 插入23 /// 24 /// 25 /// 26 protected void Button1_Click(object sender, EventArgs e)27 {28 29 string strSql = "insert into Company values('" + Guid.NewGuid().ToString() + "','" + this.name.Text.Trim() + "','" + this.address.Text.Trim() + "','"+this.phone .Text .Trim ()+"','" + city.SelectedValue.ToString() +"','"+lng.Text .Trim ()+"','"+lat.Text .Trim ()+"')";30 try31 {32 DBHelper.ExecuteSql(strSql);33 RegisterStartupScript("", "");34 }35 catch (Exception ex)36 {37 Response.Write(ex.Message );38 }39 Bind();40 }41 public void Bind()42 {43 string strSql = "select * from Company";44 45 tb=DBHelper.Query(strSql).Tables[0];46 }47 protected void Button3_Click(object sender, EventArgs e)48 {49 this.name.Text = "";50 this.address.Text = "";51 this.phone.Text = "";52 Bind();53 }54 55 56 }
可以看到,我们在default.aspx中调用了map.aspx,因此以下代码如下:
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="map.aspx.cs" Inherits="map" %> 2 3 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4 5 <html xmlns="http://www.w3.org/1999/xhtml"> 6 <head> 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 8 <meta name="keywords" content="百度地图,百度地图API,百度地图自定义工具,百度地图所见即所得工具" /> 9 <meta name="description" content="百度地图API自定义地图,帮助用户在可视化操作下生成百度地图" /> 10 <title>百度地图API自定义地图title> 11 12 <style type="text/css"> 13 html,body{margin:0;padding:0;} 14 .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap} 15 .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word} 16 style> 17 <script type="text/javascript" src="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf8719&v=1.1&services=true">script> 18 head> 19 20 <body> 21 22 <div style="width:697px;height:20px;">div> 23 <div style="width:660px;height:550px;border:#ccc solid 1px; margin-left :20px" id="dituContent">div> 24 25 <input type="hidden" id ="name" value="<%=tb.Rows[0][1]%>"/> 26 <input type ="hidden" id ="address" value ="地址:<%=tb.Rows[0][2]%>" /> 27 <input type ="hidden" id="city" value ="<%=tb.Rows[0][4] %>" /> 28 <input type ="hidden" id="phone" value ="电话:<%=tb.Rows[0][3] %>" /> 29 30 body> 31 <script type="text/javascript"> 32 //创建和初始化地图函数: 33 function initMap(){ 34 createMap();//创建地图 35 setMapEvent();//设置地图事件 36 addMapControl();//向地图添加控件 37 38 39 addMarker(); 40 41 42 43 var gc = new BMap.Geocoder(); 44 map.addEventListener("click", function(e){ 45 var pt = e.point; 46 alert(e.point.lng+","+e.point.lat); 47 gc.getLocation(pt, function(rs){ 48 var addComp = rs.addressComponents; 49 alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber); 50 map.addOverlay(new BMap.Marker(pt)); 51 52 }); 53 }); 54 55 } 56 57 //创建地图函数: 58 function createMap(){ 59 var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图 60 var point = new BMap.Point(<%=tb.Rows[0][5] %>, <%=tb.Rows[0][6] %>);//定义一个中心点坐标 61 62 map.centerAndZoom(point,14);//设定地图的中心点和坐标并将地图显示在地图容器中 63 window.map = map;//将map变量存储在全局 64 } 65 66 //地图事件设置函数: 67 function setMapEvent(){ 68 map.enableDragging();//启用地图拖拽事件,默认启用(可不写) 69 map.enableScrollWheelZoom();//启用地图滚轮放大缩小 70 map.enableDoubleClickZoom();//启用鼠标双击放大,默认启用(可不写) 71 map.enableKeyboard();//启用键盘上下左右键移动地图 72 73 } 74 75 //地图控件添加函数: 76 function addMapControl(){ 77 //向地图中添加缩放控件 78 var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE}); 79 map.addControl(ctrl_nav); 80 //向地图中添加缩略图控件 81 var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1}); 82 map.addControl(ctrl_ove); 83 //向地图中添加比例尺控件 84 var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT}); 85 map.addControl(ctrl_sca); 86 } 87 88 89 90 //标注点数组 91 var markerArr = [{ 92 title:document.getElementById ("name").value, 93 content:document.getElementById ("address").value, 94 phone:document.getElementById ("phone").value, 95 96 isOpen:1,icon:{w:21,h:21,l:0,t:0,x:6,lb:5} 97 } 98 ];8 99 //创建marker100 function addMarker(){101 for(var i=0;i<markerArr.length;i++){102 var json = markerArr[i];103 var p0 = <%=tb.Rows[0][5] %>104 var p1 =<%=tb.Rows[0][6] %>105 var point = new BMap.Point(p0,p1);106 var iconImg = createIcon(json.icon);107 var marker = new BMap.Marker(point,{icon:iconImg});108 var iw = createInfoWindow(i);109 var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});110 marker.setLabel(label);111 map.addOverlay(marker);112 label.setStyle({113 borderColor:"#808080",114 color:"#333",115 cursor:"pointer"116 });117 118 (function(){119 var index = i;120 var _iw = createInfoWindow(i);121 var _marker = marker;122 _marker.addEventListener("click",function(){123 this.openInfoWindow(_iw);124 });125 _iw.addEventListener("open",function(){126 _marker.getLabel().hide();127 })128 _iw.addEventListener("close",function(){129 _marker.getLabel().show();130 })131 label.addEventListener("click",function(){132 _marker.openInfoWindow(_iw);133 })134 if(!!json.isOpen){135 label.hide();136 _marker.openInfoWindow(_iw);137 }138 })()139 }140 }141 //创建InfoWindow142 function createInfoWindow(i){143 var json = markerArr[i];144 var iw = new BMap.InfoWindow("" + json.title +145 ""+json.content+""+json.phone+"");146 return iw;147 }148 //创建一个Icon149 function createIcon(json){150 var icon = new BMap.Icon("http://openapi.baidu.com/map/images/us_mk_icon.png",151 new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),152 infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})153 154 return icon;155 }156 157 initMap();//创建和初始化地图158 script>159 html>
在cs中如此建立
1 using System; 2 using System.Data; 3 using System.Configuration; 4 using System.Collections; 5 using System.Web; 6 using System.Web.Security; 7 using System.Web.UI; 8 using System.Web.UI.WebControls; 9 using System.Web.UI.WebControls.WebParts;10 using System.Web.UI.HtmlControls;11 12 public partial class map : System.Web.UI.Page13 {14 public DataTable tb = new DataTable();15 protected void Page_Load(object sender, EventArgs e)16 {17 if (!IsPostBack)18 {19 show();20 }21 22 }23 public void show()24 {25 if (Request.Params["ID"] != null)26 {27 string StrSql = "select * from Company where ID='" + Request.Params["ID"].ToString() + "'";28 tb = DBHelper.Query(StrSql).Tables[0];29 }30 }31 }
剩下的关于数据库所需要的公共类,大家自己根据自己的数据库建立咯~