Community Learn Tools Library Leisure
search
English
Home > Database > Mysql Tutorial > body text

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

WBOY
Release： 2016-06-07 15:07:25
Original
3365 people have browsed it

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

网上很多都是通过百度地图API调用JS的例子，并没有真正的数据库交互哦~所以我做了一个与sql server数据库交互的例子。数据库用的是sql server，大家看着自行建立数据库哦~~

首先，我们建立一个default.aspx

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

<span>  1</span> <span><span>@ Page Language</span><span>=</span><span>"</span><span>C#</span><span>"</span><span> AutoEventWireup</span><span>=</span><span>"</span><span>true</span><span>"</span><span>  CodeFile</span><span>=</span><span>"</span><span>Default.aspx.cs</span><span>"</span><span> Inherits</span><span>=</span><span>"</span><span>_Default</span><span>"</span> <span>%></span>
<span>  2</span> 
<span>  3</span> <span><span>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span>></span>
<span>  4</span> 
<span>  5</span> <span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span> <span>></span>
<span>  6</span> <span><span>head </span><span>runat</span><span>="server"</span><span>></span>
<span>  7</span>     <span><span>title</span><span>></span><span>title</span><span>></span>
<span>  8</span>     <span><span>style </span><span>type </span><span>="text/css"</span> <span>></span>
<span>  9</span> <span>        table </span><span>{</span>
<span> 10</span> <span>            border</span><span>:</span><span> solid 1px #999</span><span>;</span>
<span> 11</span>         <span>}</span>
<span> 12</span>     
<span> 13</span>     <span></span><span>style</span><span>></span>
<span> 14</span>     <span><span>style </span><span>type</span><span>="text/css"</span><span>></span>
<span> 15</span> <span>    html,body</span><span>{</span><span>margin</span><span>:</span><span>0</span><span>;</span><span>padding</span><span>:</span><span>0</span><span>;</span><span>}</span>
<span> 16</span> <span>    .iw_poi_title </span><span>{</span><span>color</span><span>:</span><span>#CC5522</span><span>;</span><span>font-size</span><span>:</span><span>14px</span><span>;</span><span>font-weight</span><span>:</span><span>bold</span><span>;</span><span>overflow</span><span>:</span><span>hidden</span><span>;</span><span>padding-right</span><span>:</span><span>13px</span><span>;</span><span>white-space</span><span>:</span><span>nowrap</span><span>}</span>
<span> 17</span> <span>    .iw_poi_content </span><span>{</span><span>font</span><span>:</span><span>12px arial,sans-serif</span><span>;</span><span>overflow</span><span>:</span><span>visible</span><span>;</span><span>padding-top</span><span>:</span><span>4px</span><span>;</span><span>white-space</span><span>:</span><span>-moz-pre-wrap</span><span>;</span><span>word-wrap</span><span>:</span><span>break-word</span><span>}</span>
<span> 18</span> <span>        .auto-style1 </span><span>{</span>
<span> 19</span> <span>            width</span><span>:</span><span> 87px</span><span>;</span>
<span> 20</span> <span>            height</span><span>:</span><span> 27px</span><span>;</span>
<span> 21</span>         <span>}</span>
<span> 22</span> <span>        .auto-style2 </span><span>{</span>
<span> 23</span> <span>            width</span><span>:</span><span> 417px</span><span>;</span>
<span> 24</span> <span>            height</span><span>:</span><span> 27px</span><span>;</span>
<span> 25</span>         <span>}</span>
<span> 26</span>     <span></span><span>style</span><span>></span>
<span> 27</span>     <span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf8719&v=1.1&services=true"</span><span>></span><span>script</span><span>></span>
<span> 28</span> 
<span> 29</span>     <span><span>script </span><span>type </span><span>="text/javascript"</span> <span>></span>
<span> 30</span>     <span>function</span><span> getAddr()
</span><span> 31</span> <span>    {
</span><span> 32</span>    <span>var</span><span> map</span><span>=</span><span>document.getElementById (</span><span>"</span><span>dituContent</span><span>"</span><span>);
</span><span> 33</span>    <span>if</span><span>(map.style.display</span><span>==</span><span>"</span><span>none</span><span>"</span><span>)
</span><span> 34</span> <span>   {
</span><span> 35</span> <span>   map.style.display</span><span>=</span><span>"</span><span>block</span><span>"</span><span>;
</span><span> 36</span> <span>   initMap();
</span><span> 37</span> <span> }
</span><span> 38</span>  <span>if</span><span>(map.style.display</span><span>!=</span><span>"</span><span>none</span><span>"</span><span>)
</span><span> 39</span> <span> {
</span><span> 40</span> <span> initMap();
</span><span> 41</span> <span> }
</span><span> 42</span> 
<span> 43</span> <span>    }
</span><span> 44</span>     <span></span><span>script</span><span>></span>
<span> 45</span> <span></span><span>head</span><span>></span>
<span> 46</span> <span><span>body </span><span>style </span><span>="font-size :12px"</span><span>></span>
<span> 47</span>     <span><span>form </span><span>id</span><span>="form1"</span><span> runat</span><span>="server"</span><span>></span>
<span> 48</span>   <span><span>div</span><span>></span>
<span> 49</span>  经：<span><span>asp:TextBox </span><span>ID</span><span>="lng"</span><span> runat</span><span>="server"</span><span>  style</span><span>=""</span><span> Width</span><span>="108px"</span>  <span>></span><span>asp:TextBox</span><span>></span>
<span> 50</span>   纬：<span><span>asp:TextBox </span><span>ID</span><span>="lat"</span><span> runat</span><span>="server"</span><span> Width</span><span>="102px"</span> <span>></span><span>asp:TextBox</span><span>></span>
<span> 51</span>   <span><span>div </span><span>style </span><span>=" float :left "</span><span>></span>
<span> 52</span>         <span><span>table </span><span>style</span><span>="width: 600px; height: 327px; "</span><span>></span>
<span> 53</span>             <span><span>tr</span><span>></span>
<span> 54</span>                 <span><span>td </span><span>style</span><span>="width: 87px"</span><span>></span>
<span> 55</span>                     名称：<span></span><span>td</span><span>></span>
<span> 56</span>                 <span><span>td </span><span>style</span><span>="width: 417px"</span><span>></span>
<span> 57</span>                     <span><span>asp:TextBox </span><span>ID</span><span>="name"</span><span> runat</span><span>="server"</span><span>></span><span>asp:TextBox</span><span>></span>
<span> 58</span>                     <span><span>asp:RequiredFieldValidator </span><span>ID</span><span>="RequiredFieldValidator1"</span><span> runat</span><span>="server"</span><span> ControlToValidate</span><span>="name"</span>
<span> 59</span> <span>                        ErrorMessage</span><span>="公司名称不能为空！"</span><span> Font-Size</span><span>="Small"</span><span>></span><span>asp:RequiredFieldValidator</span><span>></span><span>td</span><span>></span>
<span> 60</span>                 
<span> 61</span>             <span></span><span>tr</span><span>></span>
<span> 62</span>             <span><span>tr</span><span>></span>
<span> 63</span>                 <span><span>td </span><span>class</span><span>="auto-style1"</span><span>></span>
<span> 64</span>                     城市：<span></span><span>td</span><span>></span>
<span> 65</span>                 <span><span>td </span><span>class</span><span>="auto-style2"</span><span>></span>
<span> 66</span>                     <span><span>asp:DropDownList </span><span>ID</span><span>="city"</span><span> runat</span><span>="server"</span><span>></span>
<span> 67</span>                     <span><span>asp:ListItem </span><span>Value </span><span>="北京"</span><span>></span>北京<span></span><span>asp:ListItem</span><span>></span>
<span> 68</span>                         <span><span>asp:ListItem </span><span>Value </span><span>="郑州"</span><span>></span>郑州<span></span><span>asp:ListItem</span><span>></span>
<span> 69</span>                         <span><span>asp:ListItem </span><span>Value </span><span>="洛阳"</span><span>></span>洛阳<span></span><span>asp:ListItem</span><span>></span>
<span> 70</span>                         <span><span>asp:ListItem </span><span>Value </span><span>="安阳"</span><span>></span>安阳<span></span><span>asp:ListItem</span><span>></span>
<span> 71</span>                     <span></span><span>asp:DropDownList</span><span>></span><span> </span>
<span> 72</span>                     <span></span><span>td</span><span>></span>
<span> 73</span>             <span></span><span>tr</span><span>></span>
<span> 74</span>             <span><span>tr</span><span>></span>
<span> 75</span>                 <span><span>td </span><span>style</span><span>="width: 87px"</span><span>></span>
<span> 76</span>                     详细地址：<span></span><span>td</span><span>></span>
<span> 77</span>                 <span><span>td </span><span>style</span><span>="width: 417px"</span><span>></span>
<span> 78</span>                     <span><span>asp:TextBox </span><span>ID</span><span>="address"</span><span> runat</span><span>="server"</span><span> Width</span><span>="299px"</span><span>></span><span>asp:TextBox</span><span>></span>
<span> 79</span>                     <span><span>input </span><span>id</span><span>="Button2"</span><span> type</span><span>="button"</span><span> value</span><span>="在<strong>地图</strong>上标注地址"</span><span>  onclick </span><span>="getAddr()"</span> <span>/></span><span>td</span><span>></span>
<span> 80</span>           <span></span><span>tr</span><span>></span> 
<span> 81</span>             
<span> 82</span>             <span><span>tr</span><span>></span>
<span> 83</span>                 <span><span>td </span><span>style</span><span>="width: 87px; height: 30px;"</span><span>></span>
<span> 84</span>                     电话：<span></span><span>td</span><span>></span>
<span> 85</span>                 <span><span>td </span><span>style</span><span>="width: 417px; height: 30px;"</span><span>></span>
<span> 86</span>                     <span><span>asp:TextBox </span><span>ID</span><span>="phone"</span><span> runat</span><span>="server"</span><span>></span><span>asp:TextBox</span><span>></span>
<span> 87</span>                     <span><span>asp:RequiredFieldValidator </span><span>ID</span><span>="RequiredFieldValidator4"</span><span> runat</span><span>="server"</span><span> ControlToValidate</span><span>="phone"</span>
<span> 88</span> <span>                        ErrorMessage</span><span>="电话不能为空！"</span><span> Font-Size</span><span>="Small"</span><span>></span><span>asp:RequiredFieldValidator</span><span>></span><span> </span>
<span> 89</span>                 <span></span><span>td</span><span>></span>
<span> 90</span>             <span></span><span>tr</span><span>></span>
<span> 91</span>             <span><span>tr</span><span>><span>td </span><span>colspan </span><span>="2"</span><span> style</span><span>="height: 38px"</span><span>></span>
<span> 92</span>                 <span> </span> <span> </span> <span>  </span>
<span> 93</span>                     <span><span>asp:Button </span><span>ID</span><span>="Button1"</span><span> runat</span><span>="server"</span><span> OnClick</span><span>="Button1_Click"</span><span> Text</span><span>="提交"</span><span> Width</span><span>="113px"</span> <span>/></span>
<span> 94</span>                 <span><span>asp:Button </span><span>ID</span><span>="Button3"</span><span> runat</span><span>="server"</span><span> OnClick</span><span>="Button3_Click"</span><span> Text</span><span>="清空"</span><span> Width</span><span>="118px"</span> <span>/></span><span>td</span><span>></span><span>tr</span><span>></span>
<span> 95</span>         <span></span><span>table</span><span>></span>
<span> 96</span>          
<span> 97</span>       <span><span>br </span><span>/></span>
<span> 98</span>       <span><span>br </span><span>/></span>
<span> 99</span> 
<span>100</span>   <span><span>table </span><span>></span>
<span>101</span>   <span><span>for</span><span> (</span><span>int</span><span> i </span><span>=</span> <span>0</span><span>; i </span><span><span> tb.Rows.Count; i</span><span>++</span><span>)
</span><span>102</span> <span>    { </span><span>%></span>
<span>103</span>   <span><span>tr</span><span>></span>
<span>104</span>   <span><span>td</span><span>></span><span><span>=</span><span>tb.Rows[i][</span><span>1</span><span>].ToString() </span><span>%></span><span></span><span>td</span><span>></span>
<span>105</span>   <span><span>td</span><span>><span>a </span><span>href </span><span>="map.aspx?id="</span> <span>></span>查看<strong>地图</strong><span></span><span>a</span><span>></span><span>td</span><span>></span>
<span>106</span>   <span></span><span>tr</span><span>></span>
<span>107</span>   <span><span>} </span><span>%></span>
<span>108</span>   <span></span><span>table</span><span>></span>
<span>109</span>   <span></span><span>div</span><span>></span>  
<span>110</span>   <span><span>div </span><span>style</span><span>="width:559px;height:448px;border:#ccc solid 1px; margin-left :20px; float :left ; display :none "</span><span> id</span><span>="dituContent"</span><span>></span><span>div</span><span>></span>  
<span>111</span>     <span></span><span>div</span><span>></span>
<span>112</span>     <span></span><span>form</span><span>></span>
<span>113</span> <span></span><span>body</span><span>></span>
<span>114</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span>
<span>115</span>     <span>//</span><span>创建和初始化<strong>地图</strong>函数：</span>
<span>116</span>     <span>function</span><span> initMap(){
</span><span>117</span> <span>        createMap();</span><span>//</span><span>创建<strong>地图</strong></span>
<span>118</span> <span>        setMapEvent();</span><span>//</span><span>设置<strong>地图</strong>事件</span>
<span>119</span> 
<span>120</span> 
<span>121</span> 
<span>122</span>    <span>var</span><span> gc </span><span>=</span> <span>new</span><span> BMap.Geocoder();    
</span><span>123</span> <span>map.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>, </span><span>function</span><span>(e){        
</span><span>124</span>     <span>var</span><span> pt </span><span>=</span><span> e.point;
</span><span>125</span> <span>    gc.getLocation(pt, </span><span>function</span><span>(rs){
</span><span>126</span>         <span>var</span><span> addComp </span><span>=</span><span> rs.addressComponents;
</span><span>127</span>         <span>var</span><span> addr;
</span><span>128</span> <span>       addr</span><span>=</span><span>addComp.city </span><span>+</span><span> addComp.district </span><span>+</span><span> addComp.street </span><span>+</span><span> addComp.streetNumber;
</span><span>129</span> <span>       map.addOverlay(</span><span>new</span><span> BMap.Marker(pt));
</span><span>130</span> <span>      document.getElementById (</span><span>"</span><span>address</span><span>"</span><span>).value</span><span>=</span><span>addr;
</span><span>131</span> <span>      document.getElementById (</span><span>"</span><span>lng</span><span>"</span><span>).value</span><span>=</span><span>pt.lng;
</span><span>132</span> <span>       document.getElementById (</span><span>"</span><span>lat</span><span>"</span><span>).value</span><span>=</span><span>pt.lat;
</span><span>133</span>       
<span>134</span> <span>    });        
</span><span>135</span> <span>});    
</span><span>136</span>         
<span>137</span> <span>    }
</span><span>138</span>     
<span>139</span>     <span>//</span><span>创建<strong>地图</strong>函数：</span>
<span>140</span>     <span>function</span><span> createMap(){
</span><span>141</span>         <span>var</span><span> map </span><span>=</span> <span>new</span><span> BMap.Map(</span><span>"</span><span>dituContent</span><span>"</span><span>);</span><span>//</span><span>在百度<strong>地图</strong>容器中创建一个<strong>地图</strong></span>
<span>142</span>     <span>//</span><span> 创建地址解析器实例</span>
<span>143</span>         <span>var</span><span> myGeo </span><span>=</span> <span>new</span><span> BMap.Geocoder();
</span><span>144</span>         <span>//</span><span> 将地址解析结果显示在<strong>地图</strong>上,并调整<strong>地图</strong>视野</span>
<span>145</span> <span>        myGeo.getPoint(document.getElementById(</span><span>"</span><span>city</span><span>"</span><span>).value, </span><span>function</span><span>(point){
</span><span>146</span>           <span>if</span><span> (point) {
</span><span>147</span> <span>            map.centerAndZoom(point, </span><span>14</span><span>);
</span><span>148</span> 
<span>149</span> <span>          }
</span><span>150</span> <span>        }, document.getElementById (</span><span>"</span><span>city</span><span>"</span><span>).value);
</span><span>151</span> <span>        window.map </span><span>=</span><span> map;</span><span>//</span><span>将map变量<strong>存储</strong>在全局</span>
<span>152</span> <span>    }
</span><span>153</span>     
<span>154</span>     <span>//</span><span><strong>地图</strong>事件设置函数：</span>
<span>155</span>     <span>function</span><span> setMapEvent(){
</span><span>156</span> <span>        map.enableDragging();</span><span>//</span><span>启用<strong>地图</strong>拖拽事件，默认启用(可不写)</span>
<span>157</span> <span>        map.enableScrollWheelZoom();</span><span>//</span><span>启用<strong>地图</strong>滚轮放大缩小</span>
<span>158</span> <span>        map.enableDoubleClickZoom();</span><span>//</span><span>启用鼠标双击放大，默认启用(可不写)</span>
<span>159</span> <span>        map.enableKeyboard();</span><span>//</span><span>启用键盘上下左右键移动<strong>地图</strong></span>
<span>160</span>         
<span>161</span> <span>    }
</span><span>162</span>     
<span>163</span>     
<span>164</span> <span>    initMap();</span><span>//</span><span>创建和初始化<strong>地图</strong></span>
<span>165</span> <span></span><span>script</span><span>></span>
<span>166</span> <span></span><span>html</span><span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login
View Code

default.aspx.cs我们在里面这样写：

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

<span> 1</span> <span>using</span><span> System;
</span><span> 2</span> <span>using</span><span> System.Data;
</span><span> 3</span> <span>using</span><span> System.Configuration;
</span><span> 4</span> <span>using</span><span> System.Web;
</span><span> 5</span> <span>using</span><span> System.Web.Security;
</span><span> 6</span> <span>using</span><span> System.Web.UI;
</span><span> 7</span> <span>using</span><span> System.Web.UI.WebControls;
</span><span> 8</span> <span>using</span><span> System.Web.UI.WebControls.WebParts;
</span><span> 9</span> <span>using</span><span> System.Web.UI.HtmlControls;
</span><span>10</span> <span>public</span> <span>partial</span> <span>class</span><span> _Default : System.Web.UI.Page 
</span><span>11</span> <span>{
</span><span>12</span>     <span>public</span> DataTable tb = <span>new</span><span> DataTable();
</span><span>13</span>     <span>protected</span> <span>void</span> Page_Load(<span>object</span><span> sender, EventArgs e)
</span><span>14</span> <span>    {
</span><span>15</span>         <span>if</span> (!<span>IsPostBack)
</span><span>16</span> <span>        {
</span><span>17</span> <span>            Bind();
</span><span>18</span> <span>        }
</span><span>19</span>       
<span>20</span> <span>    }
</span><span>21</span>     <span>///</span> <span><summary></summary></span>
<span>22</span>     <span>///</span><span> 插入
</span><span>23</span>     <span>///</span> <span></span>
<span>24</span>     <span>///</span> <span><param name="sender"></span>
<span>25</span>     <span>///</span> <span><param name="e"></span>
<span>26</span>     <span>protected</span> <span>void</span> Button1_Click(<span>object</span><span> sender, EventArgs e)
</span><span>27</span> <span>    {
</span><span>28</span>         
<span>29</span>         <span>string</span> strSql = <span>"</span><span>insert into Company values('</span><span>"</span> + Guid.NewGuid().ToString() + <span>"</span><span>','</span><span>"</span> + <span>this</span>.name.Text.Trim() + <span>"</span><span>','</span><span>"</span> + <span>this</span>.address.Text.Trim() + <span>"</span><span>','</span><span>"</span>+<span>this</span>.phone .Text .Trim ()+<span>"</span><span>','</span><span>"</span> + city.SelectedValue.ToString() +<span>"</span><span>','</span><span>"</span>+lng.Text .Trim ()+<span>"</span><span>','</span><span>"</span>+lat.Text .Trim ()+<span>"</span><span>')</span><span>"</span><span>;
</span><span>30</span>         <span>try</span>
<span>31</span> <span>        {
</span><span>32</span> <span>            DBHelper.ExecuteSql(strSql);
</span><span>33</span>             RegisterStartupScript(<span>""</span>, <span>"</span><span><script>alert('提交成功')</script></span><span>"</span><span>);
</span><span>34</span> <span>        }
</span><span>35</span>         <span>catch</span><span> (Exception ex)
</span><span>36</span> <span>        {
</span><span>37</span> <span>            Response.Write(ex.Message );
</span><span>38</span> <span>        }
</span><span>39</span> <span>        Bind();
</span><span>40</span> <span>    }
</span><span>41</span>     <span>public</span> <span>void</span><span> Bind()
</span><span>42</span> <span>    {
</span><span>43</span>         <span>string</span> strSql = <span>"</span><span>select * from Company</span><span>"</span><span>;
</span><span>44</span>     
<span>45</span>         tb=DBHelper.Query(strSql).Tables[<span>0</span><span>];
</span><span>46</span> <span>    }
</span><span>47</span>     <span>protected</span> <span>void</span> Button3_Click(<span>object</span><span> sender, EventArgs e)
</span><span>48</span> <span>    {
</span><span>49</span>         <span>this</span>.name.Text  = <span>""</span><span>;
</span><span>50</span>         <span>this</span>.address.Text = <span>""</span><span>;
</span><span>51</span>         <span>this</span>.phone.Text = <span>""</span><span>;
</span><span>52</span> <span>        Bind();
</span><span>53</span> <span>    }
</span><span>54</span> 
<span>55</span>     
<span>56</span> }
Copy after login
View Code

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

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

<span>  1</span> <span><span>@ Page Language</span><span>=</span><span>"</span><span>C#</span><span>"</span><span> AutoEventWireup</span><span>=</span><span>"</span><span>true</span><span>"</span><span> CodeFile</span><span>=</span><span>"</span><span>map.aspx.cs</span><span>"</span><span> Inherits</span><span>=</span><span>"</span><span>map</span><span>"</span> <span>%></span>
<span>  2</span> 
<span>  3</span> <span><span>DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span>></span>
<span>  4</span> 
<span>  5</span> <span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span><span>></span>
<span>  6</span> <span><span>head</span><span>></span>
<span>  7</span> <span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=gb2312"</span> <span>/></span>
<span>  8</span> <span><span>meta </span><span>name</span><span>="keywords"</span><span> content</span><span>="百度<strong>地图</strong>,百度<strong>地图</strong>API，百度<strong>地图</strong>自定义工具，百度<strong>地图</strong>所见即所得工具"</span> <span>/></span>
<span>  9</span> <span><span>meta </span><span>name</span><span>="description"</span><span> content</span><span>="百度<strong>地图</strong>API自定义<strong>地图</strong>，帮助用户在可视化操作下生成百度<strong>地图</strong>"</span> <span>/></span>
<span> 10</span> <span><span>title</span><span>></span>百度<strong>地图</strong>API自定义<strong>地图</strong><span></span><span>title</span><span>></span>
<span> 11</span> <span><!--</span><span >引用百度<strong>地图</strong>API</span><span >--></span>
<span> 12</span> <span><span>style </span><span>type</span><span>="text/css"</span><span>></span>
<span> 13</span> <span>    html,body</span><span>{</span><span>margin</span><span>:</span><span>0</span><span>;</span><span>padding</span><span>:</span><span>0</span><span>;</span><span>}</span>
<span> 14</span> <span>    .iw_poi_title </span><span>{</span><span>color</span><span>:</span><span>#CC5522</span><span>;</span><span>font-size</span><span>:</span><span>14px</span><span>;</span><span>font-weight</span><span>:</span><span>bold</span><span>;</span><span>overflow</span><span>:</span><span>hidden</span><span>;</span><span>padding-right</span><span>:</span><span>13px</span><span>;</span><span>white-space</span><span>:</span><span>nowrap</span><span>}</span>
<span> 15</span> <span>    .iw_poi_content </span><span>{</span><span>font</span><span>:</span><span>12px arial,sans-serif</span><span>;</span><span>overflow</span><span>:</span><span>visible</span><span>;</span><span>padding-top</span><span>:</span><span>4px</span><span>;</span><span>white-space</span><span>:</span><span>-moz-pre-wrap</span><span>;</span><span>word-wrap</span><span>:</span><span>break-word</span><span>}</span>
<span> 16</span> <span></span><span>style</span><span>></span>
<span> 17</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span> src</span><span>="http://api.map.baidu.com/api?key=46ce9d0614bf7aefe0ba562f8cf8719&v=1.1&services=true"</span><span>></span><span>script</span><span>></span>
<span> 18</span> <span></span><span>head</span><span>></span>
<span> 19</span> 
<span> 20</span> <span><span>body</span><span>></span>
<span> 21</span>   <span><!--</span><span >百度<strong>地图</strong>容器</span><span >--></span>
<span> 22</span>   <span><span>div </span><span>style</span><span>="width:697px;height:20px;"</span><span>></span><span>div</span><span>></span>
<span> 23</span>   <span><span>div </span><span>style</span><span>="width:660px;height:550px;border:#ccc solid 1px; margin-left :20px"</span><span> id</span><span>="dituContent"</span><span>></span><span>div</span><span>></span>
<span> 24</span> 
<span> 25</span>  <span><span>input </span><span>type</span><span>="hidden"</span><span> id </span><span>="name"</span><span>  value</span><span>=""</span><span>/></span>
<span> 26</span> <span><span>input </span><span>type </span><span>="hidden"</span><span> id </span><span>="address"</span><span> value </span><span>="地址："</span> <span>/></span>
<span> 27</span> <span><span>input </span><span>type </span><span>="hidden"</span><span> id</span><span>="city"</span><span> value </span><span>=""</span> <span>/></span>
<span> 28</span> <span><span>input </span><span>type </span><span>="hidden"</span><span> id</span><span>="phone"</span><span> value </span><span>="电话："</span> <span>/></span>
<span> 29</span> 
<span> 30</span> <span></span><span>body</span><span>></span>
<span> 31</span> <span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span>
<span> 32</span>     <span>//</span><span>创建和初始化<strong>地图</strong>函数：</span>
<span> 33</span>     <span>function</span><span> initMap(){
</span><span> 34</span> <span>        createMap();</span><span>//</span><span>创建<strong>地图</strong></span>
<span> 35</span> <span>        setMapEvent();</span><span>//</span><span>设置<strong>地图</strong>事件</span>
<span> 36</span> <span>         addMapControl();</span><span>//</span><span>向<strong>地图</strong>添加控件</span>
<span> 37</span> 
<span> 38</span>  
<span> 39</span> <span>   addMarker();
</span><span> 40</span> 
<span> 41</span> 
<span> 42</span> 
<span> 43</span>    <span>var</span><span> gc </span><span>=</span> <span>new</span><span> BMap.Geocoder();    
</span><span> 44</span> <span>map.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>, </span><span>function</span><span>(e){        
</span><span> 45</span>     <span>var</span><span> pt </span><span>=</span><span> e.point;
</span><span> 46</span> <span>    alert(e.point.lng</span><span>+</span><span>"</span><span>,</span><span>"</span><span>+</span><span>e.point.lat);
</span><span> 47</span> <span>    gc.getLocation(pt, </span><span>function</span><span>(rs){
</span><span> 48</span>         <span>var</span><span> addComp </span><span>=</span><span> rs.addressComponents;
</span><span> 49</span> <span>        alert(addComp.province </span><span>+</span> <span>"</span><span>, </span><span>"</span> <span>+</span><span> addComp.city </span><span>+</span> <span>"</span><span>, </span><span>"</span> <span>+</span><span> addComp.district </span><span>+</span> <span>"</span><span>, </span><span>"</span> <span>+</span><span> addComp.street </span><span>+</span> <span>"</span><span>, </span><span>"</span> <span>+</span><span> addComp.streetNumber);
</span><span> 50</span> <span>         map.addOverlay(</span><span>new</span><span> BMap.Marker(pt));
</span><span> 51</span> 
<span> 52</span> <span>    });        
</span><span> 53</span> <span>});    
</span><span> 54</span>         
<span> 55</span> <span>    }
</span><span> 56</span>     
<span> 57</span>     <span>//</span><span>创建<strong>地图</strong>函数：</span>
<span> 58</span>     <span>function</span><span> createMap(){
</span><span> 59</span>         <span>var</span><span> map </span><span>=</span> <span>new</span><span> BMap.Map(</span><span>"</span><span>dituContent</span><span>"</span><span>);</span><span>//</span><span>在百度<strong>地图</strong>容器中创建一个<strong>地图</strong></span>
<span> 60</span>      <span>var</span><span> point </span><span>=</span> <span>new</span><span> BMap.Point(</span><span><span>tb.Rows[</span><span>0</span><span>][</span><span>5</span><span>] </span><span>%></span><span>, </span><span><span>tb.Rows[</span><span>0</span><span>][</span><span>6</span><span>] </span><span>%></span><span>);</span><span>//</span><span>定义一个中心点<strong>坐标</strong></span>
<span> 61</span> 
<span> 62</span> <span>        map.centerAndZoom(point,</span><span>14</span><span>);</span><span>//</span><span>设定<strong>地图</strong>的中心点和<strong>坐标</strong>并将<strong>地图</strong>显示在<strong>地图</strong>容器中</span>
<span> 63</span> <span>        window.map </span><span>=</span><span> map;</span><span>//</span><span>将map变量<strong>存储</strong>在全局</span>
<span> 64</span> <span>    }
</span><span> 65</span>     
<span> 66</span>     <span>//</span><span><strong>地图</strong>事件设置函数：</span>
<span> 67</span>     <span>function</span><span> setMapEvent(){
</span><span> 68</span> <span>        map.enableDragging();</span><span>//</span><span>启用<strong>地图</strong>拖拽事件，默认启用(可不写)</span>
<span> 69</span> <span>        map.enableScrollWheelZoom();</span><span>//</span><span>启用<strong>地图</strong>滚轮放大缩小</span>
<span> 70</span> <span>        map.enableDoubleClickZoom();</span><span>//</span><span>启用鼠标双击放大，默认启用(可不写)</span>
<span> 71</span> <span>        map.enableKeyboard();</span><span>//</span><span>启用键盘上下左右键移动<strong>地图</strong></span>
<span> 72</span>         
<span> 73</span> <span>    }
</span><span> 74</span>     
<span> 75</span>     <span>//</span><span><strong>地图</strong>控件添加函数：</span>
<span> 76</span>     <span>function</span><span> addMapControl(){
</span><span> 77</span>         <span>//</span><span>向<strong>地图</strong>中添加缩放控件</span>
<span> 78</span>     <span>var</span><span> ctrl_nav </span><span>=</span> <span>new</span><span> BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
</span><span> 79</span> <span>    map.addControl(ctrl_nav);
</span><span> 80</span>         <span>//</span><span>向<strong>地图</strong>中添加缩略图控件</span>
<span> 81</span>     <span>var</span><span> ctrl_ove </span><span>=</span> <span>new</span><span> BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:</span><span>1</span><span>});
</span><span> 82</span> <span>    map.addControl(ctrl_ove);
</span><span> 83</span>         <span>//</span><span>向<strong>地图</strong>中添加比例尺控件</span>
<span> 84</span>     <span>var</span><span> ctrl_sca </span><span>=</span> <span>new</span><span> BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});
</span><span> 85</span> <span>    map.addControl(ctrl_sca);
</span><span> 86</span> <span>    }
</span><span> 87</span> 
<span> 88</span> 
<span> 89</span> 
<span> 90</span>     <span>//</span><span>标注点数组</span>
<span> 91</span>     <span>var</span><span> markerArr </span><span>=</span><span> [{
</span><span> 92</span> <span>    title:document.getElementById (</span><span>"</span><span>name</span><span>"</span><span>).value,
</span><span> 93</span> <span>    content:document.getElementById (</span><span>"</span><span>address</span><span>"</span><span>).value,
</span><span> 94</span> <span>    phone:document.getElementById (</span><span>"</span><span>phone</span><span>"</span><span>).value,
</span><span> 95</span>     
<span> 96</span> <span>    isOpen:</span><span>1</span><span>,icon:{w:</span><span>21</span><span>,h:</span><span>21</span><span>,l:</span><span>0</span><span>,t:</span><span>0</span><span>,x:</span><span>6</span><span>,lb:</span><span>5</span><span>}
</span><span> 97</span> <span>    }
</span><span> 98</span> <span>         ];</span><span>8</span>
<span> 99</span>     <span>//</span><span>创建marker</span>
<span>100</span>     <span>function</span><span> addMarker(){
</span><span>101</span>         <span>for</span><span>(</span><span>var</span><span> i</span><span>=</span><span>0</span><span>;i</span><span><span>markerArr.length;i</span><span>++</span><span>){
</span><span>102</span>             <span>var</span><span> json </span><span>=</span><span> markerArr[i];
</span><span>103</span>             <span>var</span><span> p0 </span><span>=</span> <span><span>tb.Rows[</span><span>0</span><span>][</span><span>5</span><span>] </span><span>%></span>
<span>104</span>             <span>var</span><span> p1 </span><span>=<span>tb.Rows[</span><span>0</span><span>][</span><span>6</span><span>] </span><span>%></span>
<span>105</span>             <span>var</span><span> point </span><span>=</span> <span>new</span><span> BMap.Point(p0,p1);
</span><span>106</span>             <span>var</span><span> iconImg </span><span>=</span><span> createIcon(json.icon);
</span><span>107</span>             <span>var</span><span> marker </span><span>=</span> <span>new</span><span> BMap.Marker(point,{icon:iconImg});
</span><span>108</span>             <span>var</span><span> iw </span><span>=</span><span> createInfoWindow(i);
</span><span>109</span>             <span>var</span><span> label </span><span>=</span> <span>new</span><span> BMap.Label(json.title,{</span><span>"</span><span>offset</span><span>"</span><span>:</span><span>new</span><span> BMap.Size(json.icon.lb</span><span>-</span><span>json.icon.x</span><span>+</span><span>10</span><span>,</span><span>-</span><span>20</span><span>)});
</span><span>110</span> <span>            marker.setLabel(label);
</span><span>111</span> <span>            map.addOverlay(marker);
</span><span>112</span> <span>            label.setStyle({
</span><span>113</span> <span>                        borderColor:</span><span>"</span><span>#808080</span><span>"</span><span>,
</span><span>114</span> <span>                        color:</span><span>"</span><span>#333</span><span>"</span><span>,
</span><span>115</span> <span>                        cursor:</span><span>"</span><span>pointer</span><span>"</span>
<span>116</span> <span>            });
</span><span>117</span>         
<span>118</span> <span>            (</span><span>function</span><span>(){
</span><span>119</span>                 <span>var</span><span> index </span><span>=</span><span> i;
</span><span>120</span>                 <span>var</span><span> _iw </span><span>=</span><span> createInfoWindow(i);
</span><span>121</span>                 <span>var</span><span> _marker </span><span>=</span><span> marker;
</span><span>122</span> <span>                _marker.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>,</span><span>function</span><span>(){
</span><span>123</span>                     <span>this</span><span>.openInfoWindow(_iw);
</span><span>124</span> <span>                });
</span><span>125</span> <span>                _iw.addEventListener(</span><span>"</span><span>open</span><span>"</span><span>,</span><span>function</span><span>(){
</span><span>126</span> <span>                    _marker.getLabel().hide();
</span><span>127</span> <span>                })
</span><span>128</span> <span>                _iw.addEventListener(</span><span>"</span><span>close</span><span>"</span><span>,</span><span>function</span><span>(){
</span><span>129</span> <span>                    _marker.getLabel().show();
</span><span>130</span> <span>                })
</span><span>131</span> <span>                label.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>,</span><span>function</span><span>(){
</span><span>132</span> <span>                    _marker.openInfoWindow(_iw);
</span><span>133</span> <span>                })
</span><span>134</span>                 <span>if</span><span>(</span><span>!!</span><span>json.isOpen){
</span><span>135</span> <span>                    label.hide();
</span><span>136</span> <span>                    _marker.openInfoWindow(_iw);
</span><span>137</span> <span>                }
</span><span>138</span> <span>            })()
</span><span>139</span> <span>        }
</span><span>140</span> <span>    }
</span><span>141</span>     <span>//</span><span>创建InfoWindow</span>
<span>142</span>     <span>function</span><span> createInfoWindow(i){
</span><span>143</span>         <span>var</span><span> json </span><span>=</span><span> markerArr[i];
</span><span>144</span>         <span>var</span><span> iw </span><span>=</span> <span>new</span><span> BMap.InfoWindow(</span><span>"</span><span><b class="iw_poi_title" title='</span><span >"</span> <span >+</span><span > json.title </span><span >+</span> <span >"</span><span >'></b></span><span>"</span> <span>+</span><span> json.title </span><span>+</span>
<span>145</span>          <span>"</span><span><div class="iw_poi_content">
<span>"</span><span>+</span><span>json.content</span><span>+</span><span>"</span><span></span>
</div>
<div class="iw_poi_content">
<span>"</span><span>+</span><span>json.phone</span><span>+</span><span>"</span><span></span>
</div></span><span>"</span><span>);
</span><span>146</span>         <span>return</span><span> iw;
</span><span>147</span> <span>    }
</span><span>148</span>     <span>//</span><span>创建一个Icon</span>
<span>149</span>     <span>function</span><span> createIcon(json){
</span><span>150</span>         <span>var</span><span> icon </span><span>=</span> <span>new</span><span> BMap.Icon(</span><span>"</span><span>http://openapi.baidu.com/map/images/us_mk_icon.png</span><span>"</span><span>,
</span><span>151</span>          <span>new</span><span> BMap.Size(json.w,json.h),{imageOffset: </span><span>new</span><span> BMap.Size(</span><span>-</span><span>json.l,</span><span>-</span><span>json.t),
</span><span>152</span> <span>         infoWindowOffset:</span><span>new</span><span> BMap.Size(json.lb</span><span>+</span><span>5</span><span>,</span><span>1</span><span>),offset:</span><span>new</span><span> BMap.Size(json.x,json.h)})
</span><span>153</span>          
<span>154</span>         <span>return</span><span> icon;
</span><span>155</span> <span>    }
</span><span>156</span>     
<span>157</span> <span>    initMap();</span><span>//</span><span>创建和初始化<strong>地图</strong></span>
<span>158</span> <span></span><span>script</span><span>></span>
<span>159</span> <span></span><span>html</span><span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
Copy after login
View Code

在cs中如此建立

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

<span> 1</span> <span>using</span><span> System;
</span><span> 2</span> <span>using</span><span> System.Data;
</span><span> 3</span> <span>using</span><span> System.Configuration;
</span><span> 4</span> <span>using</span><span> System.Collections;
</span><span> 5</span> <span>using</span><span> System.Web;
</span><span> 6</span> <span>using</span><span> System.Web.Security;
</span><span> 7</span> <span>using</span><span> System.Web.UI;
</span><span> 8</span> <span>using</span><span> System.Web.UI.WebControls;
</span><span> 9</span> <span>using</span><span> System.Web.UI.WebControls.WebParts;
</span><span>10</span> <span>using</span><span> System.Web.UI.HtmlControls;
</span><span>11</span> 
<span>12</span> <span>public</span> <span>partial</span> <span>class</span><span> map : System.Web.UI.Page
</span><span>13</span> <span>{
</span><span>14</span>     <span>public</span> DataTable tb = <span>new</span><span> DataTable();
</span><span>15</span>     <span>protected</span> <span>void</span> Page_Load(<span>object</span><span> sender, EventArgs e)
</span><span>16</span> <span>    {
</span><span>17</span>         <span>if</span> (!<span>IsPostBack)
</span><span>18</span> <span>        {
</span><span>19</span> <span>            show();
</span><span>20</span> <span>        }
</span><span>21</span>         
<span>22</span> <span>    }
</span><span>23</span>     <span>public</span> <span>void</span><span> show()
</span><span>24</span> <span>    {
</span><span>25</span>         <span>if</span> (Request.Params[<span>"</span><span>ID</span><span>"</span>] != <span>null</span><span>)
</span><span>26</span> <span>        {
</span><span>27</span>             <span>string</span> StrSql = <span>"</span><span>select * from Company where ID='</span><span>"</span> + Request.Params[<span>"</span><span>ID</span><span>"</span>].ToString() + <span>"</span><span>'</span><span>"</span><span>;
</span><span>28</span>             tb = DBHelper.Query(StrSql).Tables[<span>0</span><span>];
</span><span>29</span> <span>        }
</span><span>30</span> <span>    }
</span><span>31</span> }
Copy after login
View Code

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

 


Related labels：
api map coordinate storage data Baidu Obtain pass
source：php.cn
Previous article：ORACLE进阶之三：分析函数 Next article：《实战nginx》第1、2章
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Move the content to the left by adding the Width property I have provided margins to the body. main {left margin: 200px; right margin: 200px; text a...
From 2024-04-06 22:01:35
0
3
816
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to trigger render (with filter and pagination) on sort method in React? Here is my Sort.js style component: <SortWrapper><SortText>SortBy</SortText...
From 2024-04-06 21:28:37
0
1
2257
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template