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

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

网上很多都是通过百度地图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=" >查看地图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     /// 

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 }

可以看到，我们在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 
 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>

在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 }

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