通过百度地图API获取坐标并将数据存储在数据库内。
程序员文章站
2024-01-01 21:18:58
...
网上很多都是 通过 百度 地图 API调用JS的例子,并没有真正的 数据 库交互哦~所以我做了一个与sql server 数据 库交互的例子。 数据 库用的是sql server,大家看着自行建立 数据 库哦~~ 首先,我们建立一个default.aspx 1 % @ Page Language = C# AutoEventW
网上很多都是通过百度地图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=" >查看地图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>View Code
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 ///View Code22 /// 插入 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 try 31 { 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=""/> 26 input type ="hidden" id ="address" value ="地址:" /> 27 input type ="hidden" id="city" value ="" /> 28 input type ="hidden" id="phone" value ="电话:" /> 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 //创建marker 100 function addMarker(){ 101 for(var i=0;imarkerArr.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 //创建InfoWindow 142 function createInfoWindow(i){ 143 var json = markerArr[i]; 144 var iw = new BMap.InfoWindow("" + json.title + 145 "View Code"+json.content+""+json.phone+""); 146 return iw; 147 } 148 //创建一个Icon 149 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.Page 13 { 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 }View Code
剩下的关于数据库所需要的公共类,大家自己根据自己的数据库建立咯~