通过百度地图API获取坐标并将数据存储在数据库内。
来源：互联网 发布：键帽配色软件 编辑：程序博客网 时间：2024/06/06 09:47
网上很多都是通过百度地图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 /// <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 }
可以看到，我们在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>
在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 }
剩下的关于数据库所需要的公共类，大家自己根据自己的数据库建立咯~
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 通过百度地图API获取坐标并将数据存储在数据库内。
- C#通过WebService获取JSON数据并快速解析（百度地图坐标转换API为例）
- 在VS2010中利用百度地图Place API获取POI数据（XML文件方式存储），并导入mysql数据库
- 通过百度地图API，将百度坐标转换成GPS经纬度
- 通过百度地图API，将百度坐标转换成GPS经纬度
- 通过百度地图API，将百度坐标转换成GPS经纬度
- gps数据转换为在百度地图下的坐标
- 通过Java将GPS坐标转换为百度地图坐标
- IOS 使用百度地图api 获取gps定位数据
- IOS 使用百度地图api 获取gps定位数据
- IOS 使用百度地图api 获取gps定位数据
- android 百度地图选择地址并再通过坐标获取地址
- 百度地图API学习-----单击地图获取坐标点
- 百度地图api之点击地图获取坐标点
- 关于通过GPS模块获取的坐标数据无法在Google地图上正确标记的问题说明
- 通过百度地图API获取地址经纬度
- 百度api商圈范围图修改获取坐标数据、点是否在区域范围判断、js解析创建excel
- 简单爬虫，通过百度翻译api获取数据
- 【绿色软件下么】打造不一样的win xp系统 让游戏飞
- flex按钮添加图标
- 使用P2P更新软件
- The server encountered an internal error that prevented it from fulfilling this request
- let‘s play game!
- 通过百度地图API获取坐标并将数据存储在数据库内。
- 【mfxp.com】不为人知的F8选项功能大揭秘
- 【ios开发】项目中AppDelegate详解
- 【让安卓手机快速接通笔记本WIFI的小技巧】
- 上篇日本人经营之道 二以柔克刚以弱制强
- WPF开发点钞动画
- 【免费xp系统下载】一条龙解决电脑散热大问题
- 数学之路(3)-模糊数学(6)
- HTTP协议详解
