通过百度地图API获取坐标并将数据存储在数据库内。

现在的位置: 首页 > 综合 > 正文

通过百度地图API获取坐标并将数据存储在数据库内。

2013年03月29日 ⁄ 综合 ⁄ 共 6422字 ⁄ 字号小中大 ⁄ 评论关闭

网上很多都是通过百度地图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>&nbsp;
 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>&nbsp;
 89                 </td>
 90             </tr>
 91             <tr><td colspan ="2" style="height: 38px">
 92                 &nbsp; &nbsp; &nbsp;&nbsp;
 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>

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     /// <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         try
31         {
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

【上篇】Java常见问题集锦（来自Sun中国官方站）（转载）
【下篇】ASP.NET2.0 文本编辑器FCKeditor

作者: starteget2006

该日志由 starteget2006 于11年前发表在综合分类下，最后更新于 2013年03月29日.
转载请注明: 通过百度地图API获取坐标并将数据存储在数据库内。 | 学步园 +复制链接

抱歉!评论已关闭.

返回首页

（其他合作也可洽谈）

必威体育

必威电竞

学步园

通过百度地图API获取坐标并将数据存储在数据库内。

作者: starteget2006

书签

最新文章New

本站推荐

返回首页