当前位置:Gxlcms > mysql > 通过百度地图API获取坐标并将数据存储在数据库内。

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

时间:2021-07-01 10:21:17 帮助过:30人阅读

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

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

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

  1. <span> 1</span> <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>
  2. <span> 2</span>
  3. <span> 3</span> <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>
  4. <span> 4</span>
  5. <span> 5</span> <span><</span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span> <span>></span>
  6. <span> 6</span> <span><</span><span>head </span><span>runat</span><span>="server"</span><span>></span>
  7. <span> 7</span> <span><</span><span>title</span><span>><!--</span--><span>title</span><span>></span>
  8. <span> 8</span> <span><</span><span>style </span><span>type </span><span>="text/css"</span> <span>></span>
  9. <span> 9</span> <span> table </span><span>{</span>
  10. <span> 10</span> <span> border</span><span>:</span><span> solid 1px #999</span><span>;</span>
  11. <span> 11</span> <span>}</span>
  12. <span> 12</span>
  13. <span> 13</span> <span><!--</span--><span>style</span><span>></span>
  14. <span> 14</span> <span><</span><span>style </span><span>type</span><span>="text/css"</span><span>></span>
  15. <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>
  16. <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>
  17. <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>
  18. <span> 18</span> <span> .auto-style1 </span><span>{</span>
  19. <span> 19</span> <span> width</span><span>:</span><span> 87px</span><span>;</span>
  20. <span> 20</span> <span> height</span><span>:</span><span> 27px</span><span>;</span>
  21. <span> 21</span> <span>}</span>
  22. <span> 22</span> <span> .auto-style2 </span><span>{</span>
  23. <span> 23</span> <span> width</span><span>:</span><span> 417px</span><span>;</span>
  24. <span> 24</span> <span> height</span><span>:</span><span> 27px</span><span>;</span>
  25. <span> 25</span> <span>}</span>
  26. <span> 26</span> <span><!--</span--><span>style</span><span>></span>
  27. <span> 27</span> <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>
  28. <span> 28</span>
  29. <span> 29</span> <span><</span><span>script </span><span>type </span><span>="text/javascript"</span> <span>></span>
  30. <span> 30</span> <span>function</span><span> getAddr()
  31. </span><span> 31</span> <span> {
  32. </span><span> 32</span> <span>var</span><span> map</span><span>=</span><span>document.getElementById (</span><span>"</span><span>dituContent</span><span>"</span><span>);
  33. </span><span> 33</span> <span>if</span><span>(map.style.display</span><span>==</span><span>"</span><span>none</span><span>"</span><span>)
  34. </span><span> 34</span> <span> {
  35. </span><span> 35</span> <span> map.style.display</span><span>=</span><span>"</span><span>block</span><span>"</span><span>;
  36. </span><span> 36</span> <span> initMap();
  37. </span><span> 37</span> <span> }
  38. </span><span> 38</span> <span>if</span><span>(map.style.display</span><span>!=</span><span>"</span><span>none</span><span>"</span><span>)
  39. </span><span> 39</span> <span> {
  40. </span><span> 40</span> <span> initMap();
  41. </span><span> 41</span> <span> }
  42. </span><span> 42</span>
  43. <span> 43</span> <span> }
  44. </span><span> 44</span> <span><!--</span--><span>script</span><span>></span>
  45. <span> 45</span> <span><!--</span--><span>head</span><span>></span>
  46. <span> 46</span> <span><</span><span>body </span><span>style </span><span>="font-size :12px"</span><span>></span>
  47. <span> 47</span> <span><</span><span>form </span><span>id</span><span>="form1"</span><span> runat</span><span>="server"</span><span>></span>
  48. <span> 48</span> <span><</span><span>div</span><span>></span>
  49. <span> 49</span> 经:<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>
  50. <span> 50</span> 纬:<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>
  51. <span> 51</span> <span><</span><span>div </span><span>style </span><span>=" float :left "</span><span>></span>
  52. <span> 52</span> <span><</span><span>table </span><span>style</span><span>="width: 600px; height: 327px; "</span><span>></span>
  53. <span> 53</span> <span><</span><span>tr</span><span>></span>
  54. <span> 54</span> <span><</span><span>td </span><span>style</span><span>="width: 87px"</span><span>></span>
  55. <span> 55</span> 名称:<span><!--</span--><span>td</span><span>></span>
  56. <span> 56</span> <span><</span><span>td </span><span>style</span><span>="width: 417px"</span><span>></span>
  57. <span> 57</span> <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>
  58. <span> 58</span> <span><</span><span>asp:RequiredFieldValidator </span><span>ID</span><span>="RequiredFieldValidator1"</span><span> runat</span><span>="server"</span><span> ControlToValidate</span><span>="name"</span>
  59. <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>
  60. <span> 60</span>
  61. <span> 61</span> <span><!--</span--><span>tr</span><span>></span>
  62. <span> 62</span> <span><</span><span>tr</span><span>></span>
  63. <span> 63</span> <span><</span><span>td </span><span>class</span><span>="auto-style1"</span><span>></span>
  64. <span> 64</span> 城市:<span><!--</span--><span>td</span><span>></span>
  65. <span> 65</span> <span><</span><span>td </span><span>class</span><span>="auto-style2"</span><span>></span>
  66. <span> 66</span> <span><</span><span>asp:DropDownList </span><span>ID</span><span>="city"</span><span> runat</span><span>="server"</span><span>></span>
  67. <span> 67</span> <span><</span><span>asp:ListItem </span><span>Value </span><span>="北京"</span><span>></span>北京<span><!--</span--><span>asp:ListItem</span><span>></span>
  68. <span> 68</span> <span><</span><span>asp:ListItem </span><span>Value </span><span>="郑州"</span><span>></span>郑州<span><!--</span--><span>asp:ListItem</span><span>></span>
  69. <span> 69</span> <span><</span><span>asp:ListItem </span><span>Value </span><span>="洛阳"</span><span>></span>洛阳<span><!--</span--><span>asp:ListItem</span><span>></span>
  70. <span> 70</span> <span><</span><span>asp:ListItem </span><span>Value </span><span>="安阳"</span><span>></span>安阳<span><!--</span--><span>asp:ListItem</span><span>></span>
  71. <span> 71</span> <span><!--</span--><span>asp:DropDownList</span><span>></span><span> </span>
  72. <span> 72</span> <span><!--</span--><span>td</span><span>></span>
  73. <span> 73</span> <span><!--</span--><span>tr</span><span>></span>
  74. <span> 74</span> <span><</span><span>tr</span><span>></span>
  75. <span> 75</span> <span><</span><span>td </span><span>style</span><span>="width: 87px"</span><span>></span>
  76. <span> 76</span> 详细地址:<span><!--</span--><span>td</span><span>></span>
  77. <span> 77</span> <span><</span><span>td </span><span>style</span><span>="width: 417px"</span><span>></span>
  78. <span> 78</span> <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>
  79. <span> 79</span> <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>
  80. <span> 80</span> <span><!--</span--><span>tr</span><span>></span>
  81. <span> 81</span>
  82. <span> 82</span> <span><</span><span>tr</span><span>></span>
  83. <span> 83</span> <span><</span><span>td </span><span>style</span><span>="width: 87px; height: 30px;"</span><span>></span>
  84. <span> 84</span> 电话:<span><!--</span--><span>td</span><span>></span>
  85. <span> 85</span> <span><</span><span>td </span><span>style</span><span>="width: 417px; height: 30px;"</span><span>></span>
  86. <span> 86</span> <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>
  87. <span> 87</span> <span><</span><span>asp:RequiredFieldValidator </span><span>ID</span><span>="RequiredFieldValidator4"</span><span> runat</span><span>="server"</span><span> ControlToValidate</span><span>="phone"</span>
  88. <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>
  89. <span> 89</span> <span><!--</span--><span>td</span><span>></span>
  90. <span> 90</span> <span><!--</span--><span>tr</span><span>></span>
  91. <span> 91</span> <span><</span><span>tr</span><span>><</span><span>td </span><span>colspan </span><span>="2"</span><span> style</span><span>="height: 38px"</span><span>></span>
  92. <span> 92</span> <span> </span> <span> </span> <span> </span>
  93. <span> 93</span> <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>
  94. <span> 94</span> <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>
  95. <span> 95</span> <span><!--</span--><span>table</span><span>></span>
  96. <span> 96</span>
  97. <span> 97</span> <span><</span><span>br </span><span>/></span>
  98. <span> 98</span> <span><</span><span>br </span><span>/></span>
  99. <span> 99</span>
  100. <span>100</span> <span><</span><span>table </span><span>></span>
  101. <span>101</span> <span><%</span><span>for</span><span> (</span><span>int</span><span> i </span><span>=</span> <span>0</span><span>; i </span><span><</span><span> tb.Rows.Count; i</span><span>++</span><span>)
  102. </span><span>102</span> <span> { </span><span>%></span>
  103. <span>103</span> <span><</span><span>tr</span><span>></span>
  104. <span>104</span> <span><</span><span>td</span><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>
  105. <span>105</span> <span><</span><span>td</span><span>><</span><span>a </span><span>href </span><span>="map.aspx?id=<%=tb.Rows[i][0].ToString() %>"</span> <span>></span>查看<strong>地图</strong><span><!--</span--><span>a</span><span>><!--</span--><span>td</span><span>></span>
  106. <span>106</span> <span><!--</span--><span>tr</span><span>></span>
  107. <span>107</span> <span><%</span><span>} </span><span>%></span>
  108. <span>108</span> <span><!--</span--><span>table</span><span>></span>
  109. <span>109</span> <span><!--</span--><span>div</span><span>></span>
  110. <span>110</span> <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>
  111. <span>111</span> <span><!--</span--><span>div</span><span>></span>
  112. <span>112</span> <span><!--</span--><span>form</span><span>></span>
  113. <span>113</span> <span><!--</span--><span>body</span><span>></span>
  114. <span>114</span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span>
  115. <span>115</span> <span>//</span><span>创建和初始化<strong>地图</strong>函数:</span>
  116. <span>116</span> <span>function</span><span> initMap(){
  117. </span><span>117</span> <span> createMap();</span><span>//</span><span>创建<strong>地图</strong></span>
  118. <span>118</span> <span> setMapEvent();</span><span>//</span><span>设置<strong>地图</strong>事件</span>
  119. <span>119</span>
  120. <span>120</span>
  121. <span>121</span>
  122. <span>122</span> <span>var</span><span> gc </span><span>=</span> <span>new</span><span> BMap.Geocoder();
  123. </span><span>123</span> <span>map.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>, </span><span>function</span><span>(e){
  124. </span><span>124</span> <span>var</span><span> pt </span><span>=</span><span> e.point;
  125. </span><span>125</span> <span> gc.getLocation(pt, </span><span>function</span><span>(rs){
  126. </span><span>126</span> <span>var</span><span> addComp </span><span>=</span><span> rs.addressComponents;
  127. </span><span>127</span> <span>var</span><span> addr;
  128. </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;
  129. </span><span>129</span> <span> map.addOverlay(</span><span>new</span><span> BMap.Marker(pt));
  130. </span><span>130</span> <span> document.getElementById (</span><span>"</span><span>address</span><span>"</span><span>).value</span><span>=</span><span>addr;
  131. </span><span>131</span> <span> document.getElementById (</span><span>"</span><span>lng</span><span>"</span><span>).value</span><span>=</span><span>pt.lng;
  132. </span><span>132</span> <span> document.getElementById (</span><span>"</span><span>lat</span><span>"</span><span>).value</span><span>=</span><span>pt.lat;
  133. </span><span>133</span>
  134. <span>134</span> <span> });
  135. </span><span>135</span> <span>});
  136. </span><span>136</span>
  137. <span>137</span> <span> }
  138. </span><span>138</span>
  139. <span>139</span> <span>//</span><span>创建<strong>地图</strong>函数:</span>
  140. <span>140</span> <span>function</span><span> createMap(){
  141. </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>
  142. <span>142</span> <span>//</span><span> 创建地址解析器实例</span>
  143. <span>143</span> <span>var</span><span> myGeo </span><span>=</span> <span>new</span><span> BMap.Geocoder();
  144. </span><span>144</span> <span>//</span><span> 将地址解析结果显示在<strong>地图</strong>上,并调整<strong>地图</strong>视野</span>
  145. <span>145</span> <span> myGeo.getPoint(document.getElementById(</span><span>"</span><span>city</span><span>"</span><span>).value, </span><span>function</span><span>(point){
  146. </span><span>146</span> <span>if</span><span> (point) {
  147. </span><span>147</span> <span> map.centerAndZoom(point, </span><span>14</span><span>);
  148. </span><span>148</span>
  149. <span>149</span> <span> }
  150. </span><span>150</span> <span> }, document.getElementById (</span><span>"</span><span>city</span><span>"</span><span>).value);
  151. </span><span>151</span> <span> window.map </span><span>=</span><span> map;</span><span>//</span><span>将map变量<strong>存储</strong>在全局</span>
  152. <span>152</span> <span> }
  153. </span><span>153</span>
  154. <span>154</span> <span>//</span><span><strong>地图</strong>事件设置函数:</span>
  155. <span>155</span> <span>function</span><span> setMapEvent(){
  156. </span><span>156</span> <span> map.enableDragging();</span><span>//</span><span>启用<strong>地图</strong>拖拽事件,默认启用(可不写)</span>
  157. <span>157</span> <span> map.enableScrollWheelZoom();</span><span>//</span><span>启用<strong>地图</strong>滚轮放大缩小</span>
  158. <span>158</span> <span> map.enableDoubleClickZoom();</span><span>//</span><span>启用鼠标双击放大,默认启用(可不写)</span>
  159. <span>159</span> <span> map.enableKeyboard();</span><span>//</span><span>启用键盘上下左右键移动<strong>地图</strong></span>
  160. <span>160</span>
  161. <span>161</span> <span> }
  162. </span><span>162</span>
  163. <span>163</span>
  164. <span>164</span> <span> initMap();</span><span>//</span><span>创建和初始化<strong>地图</strong></span>
  165. <span>165</span> <span><!--</span--><span>script</span><span>></span>
  166. <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>

View Code

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

  1. <span> 1</span> <span>using</span><span> System;
  2. </span><span> 2</span> <span>using</span><span> System.Data;
  3. </span><span> 3</span> <span>using</span><span> System.Configuration;
  4. </span><span> 4</span> <span>using</span><span> System.Web;
  5. </span><span> 5</span> <span>using</span><span> System.Web.Security;
  6. </span><span> 6</span> <span>using</span><span> System.Web.UI;
  7. </span><span> 7</span> <span>using</span><span> System.Web.UI.WebControls;
  8. </span><span> 8</span> <span>using</span><span> System.Web.UI.WebControls.WebParts;
  9. </span><span> 9</span> <span>using</span><span> System.Web.UI.HtmlControls;
  10. </span><span>10</span> <span>public</span> <span>partial</span> <span>class</span><span> _Default : System.Web.UI.Page
  11. </span><span>11</span> <span>{
  12. </span><span>12</span> <span>public</span> DataTable tb = <span>new</span><span> DataTable();
  13. </span><span>13</span> <span>protected</span> <span>void</span> Page_Load(<span>object</span><span> sender, EventArgs e)
  14. </span><span>14</span> <span> {
  15. </span><span>15</span> <span>if</span> (!<span>IsPostBack)
  16. </span><span>16</span> <span> {
  17. </span><span>17</span> <span> Bind();
  18. </span><span>18</span> <span> }
  19. </span><span>19</span>
  20. <span>20</span> <span> }
  21. </span><span>21</span> <span>///</span> <span><summary>
  22. <span>22</span> <span>///</span><span> 插入
  23. </span><span>23</span> <span>///</span> <span></span></summary></span>
  24. <span>24</span> <span>///</span> <span><param name="sender"></span>
  25. <span>25</span> <span>///</span> <span><param name="e"></span>
  26. <span>26</span> <span>protected</span> <span>void</span> Button1_Click(<span>object</span><span> sender, EventArgs e)
  27. </span><span>27</span> <span> {
  28. </span><span>28</span>
  29. <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>;
  30. </span><span>30</span> <span>try</span>
  31. <span>31</span> <span> {
  32. </span><span>32</span> <span> DBHelper.ExecuteSql(strSql);
  33. </span><span>33</span> RegisterStartupScript(<span>""</span>, <span>"</span><span></span>

View Code

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

  1. <span> 1</span> <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>
  2. <span> 2</span>
  3. <span> 3</span> <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>
  4. <span> 4</span>
  5. <span> 5</span> <span><</span><span>html </span><span>xmlns</span><span>="http://www.w3.org/1999/xhtml"</span><span>></span>
  6. <span> 6</span> <span><</span><span>head</span><span>></span>
  7. <span> 7</span> <span><</span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=gb2312"</span> <span>/></span>
  8. <span> 8</span> <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>
  9. <span> 9</span> <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>
  10. <span> 10</span> <span><</span><span>title</span><span>></span>百度<strong>地图</strong>API自定义<strong>地图</strong><span><!--</span--><span>title</span><span>></span>
  11. <span> 11</span> <span><!--</span><span >引用百度<strong>地图</strong>API</span><span >--></span>
  12. <span> 12</span> <span><</span><span>style </span><span>type</span><span>="text/css"</span><span>></span>
  13. <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>
  14. <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>
  15. <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>
  16. <span> 16</span> <span><!--</span--><span>style</span><span>></span>
  17. <span> 17</span> <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>
  18. <span> 18</span> <span><!--</span--><span>head</span><span>></span>
  19. <span> 19</span>
  20. <span> 20</span> <span><</span><span>body</span><span>></span>
  21. <span> 21</span> <span><!--</span><span >百度<strong>地图</strong>容器</span><span >--></span>
  22. <span> 22</span> <span><</span><span>div </span><span>style</span><span>="width:697px;height:20px;"</span><span>><!--</span--><span>div</span><span>></span>
  23. <span> 23</span> <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>
  24. <span> 24</span>
  25. <span> 25</span> <span><</span><span>input </span><span>type</span><span>="hidden"</span><span> id </span><span>="name"</span><span> value</span><span>="<%=tb.Rows[0][1]%>"</span><span>/></span>
  26. <span> 26</span> <span><</span><span>input </span><span>type </span><span>="hidden"</span><span> id </span><span>="address"</span><span> value </span><span>="地址:<%=tb.Rows[0][2]%>"</span> <span>/></span>
  27. <span> 27</span> <span><</span><span>input </span><span>type </span><span>="hidden"</span><span> id</span><span>="city"</span><span> value </span><span>="<%=tb.Rows[0][4] %>"</span> <span>/></span>
  28. <span> 28</span> <span><</span><span>input </span><span>type </span><span>="hidden"</span><span> id</span><span>="phone"</span><span> value </span><span>="电话:<%=tb.Rows[0][3] %>"</span> <span>/></span>
  29. <span> 29</span>
  30. <span> 30</span> <span><!--</span--><span>body</span><span>></span>
  31. <span> 31</span> <span><</span><span>script </span><span>type</span><span>="text/javascript"</span><span>></span>
  32. <span> 32</span> <span>//</span><span>创建和初始化<strong>地图</strong>函数:</span>
  33. <span> 33</span> <span>function</span><span> initMap(){
  34. </span><span> 34</span> <span> createMap();</span><span>//</span><span>创建<strong>地图</strong></span>
  35. <span> 35</span> <span> setMapEvent();</span><span>//</span><span>设置<strong>地图</strong>事件</span>
  36. <span> 36</span> <span> addMapControl();</span><span>//</span><span>向<strong>地图</strong>添加控件</span>
  37. <span> 37</span>
  38. <span> 38</span>
  39. <span> 39</span> <span> addMarker();
  40. </span><span> 40</span>
  41. <span> 41</span>
  42. <span> 42</span>
  43. <span> 43</span> <span>var</span><span> gc </span><span>=</span> <span>new</span><span> BMap.Geocoder();
  44. </span><span> 44</span> <span>map.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>, </span><span>function</span><span>(e){
  45. </span><span> 45</span> <span>var</span><span> pt </span><span>=</span><span> e.point;
  46. </span><span> 46</span> <span> alert(e.point.lng</span><span>+</span><span>"</span><span>,</span><span>"</span><span>+</span><span>e.point.lat);
  47. </span><span> 47</span> <span> gc.getLocation(pt, </span><span>function</span><span>(rs){
  48. </span><span> 48</span> <span>var</span><span> addComp </span><span>=</span><span> rs.addressComponents;
  49. </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);
  50. </span><span> 50</span> <span> map.addOverlay(</span><span>new</span><span> BMap.Marker(pt));
  51. </span><span> 51</span>
  52. <span> 52</span> <span> });
  53. </span><span> 53</span> <span>});
  54. </span><span> 54</span>
  55. <span> 55</span> <span> }
  56. </span><span> 56</span>
  57. <span> 57</span> <span>//</span><span>创建<strong>地图</strong>函数:</span>
  58. <span> 58</span> <span>function</span><span> createMap(){
  59. </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>
  60. <span> 60</span> <span>var</span><span> point </span><span>=</span> <span>new</span><span> BMap.Point(</span><span><%=</span><span>tb.Rows[</span><span>0</span><span>][</span><span>5</span><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>
  61. <span> 61</span>
  62. <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>
  63. <span> 63</span> <span> window.map </span><span>=</span><span> map;</span><span>//</span><span>将map变量<strong>存储</strong>在全局</span>
  64. <span> 64</span> <span> }
  65. </span><span> 65</span>
  66. <span> 66</span> <span>//</span><span><strong>地图</strong>事件设置函数:</span>
  67. <span> 67</span> <span>function</span><span> setMapEvent(){
  68. </span><span> 68</span> <span> map.enableDragging();</span><span>//</span><span>启用<strong>地图</strong>拖拽事件,默认启用(可不写)</span>
  69. <span> 69</span> <span> map.enableScrollWheelZoom();</span><span>//</span><span>启用<strong>地图</strong>滚轮放大缩小</span>
  70. <span> 70</span> <span> map.enableDoubleClickZoom();</span><span>//</span><span>启用鼠标双击放大,默认启用(可不写)</span>
  71. <span> 71</span> <span> map.enableKeyboard();</span><span>//</span><span>启用键盘上下左右键移动<strong>地图</strong></span>
  72. <span> 72</span>
  73. <span> 73</span> <span> }
  74. </span><span> 74</span>
  75. <span> 75</span> <span>//</span><span><strong>地图</strong>控件添加函数:</span>
  76. <span> 76</span> <span>function</span><span> addMapControl(){
  77. </span><span> 77</span> <span>//</span><span>向<strong>地图</strong>中添加缩放控件</span>
  78. <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});
  79. </span><span> 79</span> <span> map.addControl(ctrl_nav);
  80. </span><span> 80</span> <span>//</span><span>向<strong>地图</strong>中添加缩略图控件</span>
  81. <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>});
  82. </span><span> 82</span> <span> map.addControl(ctrl_ove);
  83. </span><span> 83</span> <span>//</span><span>向<strong>地图</strong>中添加比例尺控件</span>
  84. <span> 84</span> <span>var</span><span> ctrl_sca </span><span>=</span> <span>new</span><span> BMap.ScaleControl({anchor:BMAP_ANCHOR_TOP_LEFT});
  85. </span><span> 85</span> <span> map.addControl(ctrl_sca);
  86. </span><span> 86</span> <span> }
  87. </span><span> 87</span>
  88. <span> 88</span>
  89. <span> 89</span>
  90. <span> 90</span> <span>//</span><span>标注点数组</span>
  91. <span> 91</span> <span>var</span><span> markerArr </span><span>=</span><span> [{
  92. </span><span> 92</span> <span> title:document.getElementById (</span><span>"</span><span>name</span><span>"</span><span>).value,
  93. </span><span> 93</span> <span> content:document.getElementById (</span><span>"</span><span>address</span><span>"</span><span>).value,
  94. </span><span> 94</span> <span> phone:document.getElementById (</span><span>"</span><span>phone</span><span>"</span><span>).value,
  95. </span><span> 95</span>
  96. <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>}
  97. </span><span> 97</span> <span> }
  98. </span><span> 98</span> <span> ];</span><span>8</span>
  99. <span> 99</span> <span>//</span><span>创建marker</span>
  100. <span>100</span> <span>function</span><span> addMarker(){
  101. </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><span>markerArr.length;i</span><span>++</span><span>){
  102. </span><span>102</span> <span>var</span><span> json </span><span>=</span><span> markerArr[i];
  103. </span><span>103</span> <span>var</span><span> p0 </span><span>=</span> <span><%=</span><span>tb.Rows[</span><span>0</span><span>][</span><span>5</span><span>] </span><span>%></span>
  104. <span>104</span> <span>var</span><span> p1 </span><span>=<%=</span><span>tb.Rows[</span><span>0</span><span>][</span><span>6</span><span>] </span><span>%></span>
  105. <span>105</span> <span>var</span><span> point </span><span>=</span> <span>new</span><span> BMap.Point(p0,p1);
  106. </span><span>106</span> <span>var</span><span> iconImg </span><span>=</span><span> createIcon(json.icon);
  107. </span><span>107</span> <span>var</span><span> marker </span><span>=</span> <span>new</span><span> BMap.Marker(point,{icon:iconImg});
  108. </span><span>108</span> <span>var</span><span> iw </span><span>=</span><span> createInfoWindow(i);
  109. </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>)});
  110. </span><span>110</span> <span> marker.setLabel(label);
  111. </span><span>111</span> <span> map.addOverlay(marker);
  112. </span><span>112</span> <span> label.setStyle({
  113. </span><span>113</span> <span> borderColor:</span><span>"</span><span>#808080</span><span>"</span><span>,
  114. </span><span>114</span> <span> color:</span><span>"</span><span>#333</span><span>"</span><span>,
  115. </span><span>115</span> <span> cursor:</span><span>"</span><span>pointer</span><span>"</span>
  116. <span>116</span> <span> });
  117. </span><span>117</span>
  118. <span>118</span> <span> (</span><span>function</span><span>(){
  119. </span><span>119</span> <span>var</span><span> index </span><span>=</span><span> i;
  120. </span><span>120</span> <span>var</span><span> _iw </span><span>=</span><span> createInfoWindow(i);
  121. </span><span>121</span> <span>var</span><span> _marker </span><span>=</span><span> marker;
  122. </span><span>122</span> <span> _marker.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>,</span><span>function</span><span>(){
  123. </span><span>123</span> <span>this</span><span>.openInfoWindow(_iw);
  124. </span><span>124</span> <span> });
  125. </span><span>125</span> <span> _iw.addEventListener(</span><span>"</span><span>open</span><span>"</span><span>,</span><span>function</span><span>(){
  126. </span><span>126</span> <span> _marker.getLabel().hide();
  127. </span><span>127</span> <span> })
  128. </span><span>128</span> <span> _iw.addEventListener(</span><span>"</span><span>close</span><span>"</span><span>,</span><span>function</span><span>(){
  129. </span><span>129</span> <span> _marker.getLabel().show();
  130. </span><span>130</span> <span> })
  131. </span><span>131</span> <span> label.addEventListener(</span><span>"</span><span>click</span><span>"</span><span>,</span><span>function</span><span>(){
  132. </span><span>132</span> <span> _marker.openInfoWindow(_iw);
  133. </span><span>133</span> <span> })
  134. </span><span>134</span> <span>if</span><span>(</span><span>!!</span><span>json.isOpen){
  135. </span><span>135</span> <span> label.hide();
  136. </span><span>136</span> <span> _marker.openInfoWindow(_iw);
  137. </span><span>137</span> <span> }
  138. </span><span>138</span> <span> })()
  139. </span><span>139</span> <span> }
  140. </span><span>140</span> <span> }
  141. </span><span>141</span> <span>//</span><span>创建InfoWindow</span>
  142. <span>142</span> <span>function</span><span> createInfoWindow(i){
  143. </span><span>143</span> <span>var</span><span> json </span><span>=</span><span> markerArr[i];
  144. </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><b class="iw_poi_title" title="</span><span >"</span> <span >+</span><span > json.title </span><span >+</span> <span >"</span><span >"><span>"</span> <span>+</span><span> json.title </span><span>+</span>
  145. <span>145</span> <span>"</span><span></span></b><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>);
  146. </span><span>146</span> <span>return</span><span> iw;
  147. </span><span>147</span> <span> }
  148. </span><span>148</span> <span>//</span><span>创建一个Icon</span>
  149. <span>149</span> <span>function</span><span> createIcon(json){
  150. </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>,
  151. </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),
  152. </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)})
  153. </span><span>153</span>
  154. <span>154</span> <span>return</span><span> icon;
  155. </span><span>155</span> <span> }
  156. </span><span>156</span>
  157. <span>157</span> <span> initMap();</span><span>//</span><span>创建和初始化<strong>地图</strong></span>
  158. <span>158</span> <span><!--</span--><span>script</span><span>></span>
  159. <span>159</span> <span><!--</span--><span>html</span><span>></span></span></span></span></span></span></span></span></span></span>

View Code

在cs中如此建立

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

View Code

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

人气教程排行