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

最新推荐文章于 2023-04-13 20:07:54 发布

weixin_30607659

最新推荐文章于 2023-04-13 20:07:54 发布

阅读量642

点赞数

文章标签：数据库 c# json

原文链接：http://www.cnblogs.com/lttirene/archive/2013/05/29/3106386.html

版权

网上很多都是通过百度地图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: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     //创建marker
100     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     //创建InfoWindow
142     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     //创建一个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>

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.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

剩下的关于数据库所需要的公共类，大家自己根据自己的数据库建立咯~

转载于:https://www.cnblogs.com/lttirene/archive/2013/05/29/3106386.html

weixin_30607659

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
通过百度地图API获取坐标并将数据存储在数据库内。

网上很多都是通过百度地图API调用JS的例子，并没有真正的数据库交互哦~所以我做了一个与sql server数据库交互的例子。数据库用的是sql server，大家看着自行建立数据库哦~~首先，我们建立一个default.aspx 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx....
复制链接

扫一扫