通過百度地圖API獲取座標並將資料儲存在資料庫內。
阿新 • • 發佈：2018-12-19
網上很多都是通過百度地圖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"View Code> 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 /// <summary>22 /// 插入23 /// </summary>24 /// <param name="sender"></param>25 /// <param name="e"></param>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("", "<script>alert('提交成功')</script>");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 }View Code
可以看到，我們在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 <!--引用百度地圖API--> 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("<b class='iw_poi_title' title='" + json.title + "'>" + json.title +145 "</b><div class='iw_poi_content'>"+json.content+"</div><div class='iw_poi_content'>"+json.phone+"</div>");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>View Code
在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 }View Code
剩下的關於資料庫所需要的公共類，大家自己根據自己的資料庫建立咯~