通过百度地图API获取坐标并将数据存储在数据库内。
- WBOY原创
- 2016-06-07 15:07:253328浏览
网上很多都是 通过 百度 地图 API调用JS的例子，并没有真正的 数据 库交互哦~所以我做了一个与sql server 数据 库交互的例子。 数据 库用的是sql server，大家看着自行建立 数据 库哦~~ 首先，我们建立一个default.aspx 1 % @ Page Language = C# AutoEventW
网上很多都是通过百度地图API调用JS的例子，并没有真正的数据库交互哦~所以我做了一个与sql server数据库交互的例子。数据库用的是sql server，大家看着自行建立数据库哦~~
首先，我们建立一个default.aspx
<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> View Code default.aspx.cs我们在里面这样写：
<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> } View Code 可以看到，我们在default.aspx中调用了map.aspx，因此以下代码如下：
<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> View Code 在cs中如此建立
<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> } View Code 剩下的关于数据库所需要的公共类，大家自己根据自己的数据库建立咯~
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：ORACLE进阶之三：分析函数下一篇：《实战nginx》第1、2章