欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  数据库

通过百度地图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

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

  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我们在里面这样写:

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

 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     /// 
22     /// 插入
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 }
View Code

可以看到,我们在default.aspx中调用了map.aspx,因此以下代码如下:

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

  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          "
"+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>
View Code

在cs中如此建立

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

 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

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

上一篇:

下一篇: