从高德地图抓取数据

老板是搞交通的，要我从高德上抓数据放到自己的数据库中。说做就做！

一，工具

1，VisualStudio2010

或其他的HTML编辑器
2，访问数据库

使用的MySQL或其他数据库需要服务器支持，这里为了方便就使用访问
3，IE浏览器

二，步骤

获取高德地图点的属性

使用的JavaScript代码警报出poiArr [I]对象的所有属性，为创建表格做准备

建立访问数据库表

依据上面所得出的数据，创建POI表，字段有ID（主键），名称，类型，纬度，lotitude，经度，地址和电话。

为了方便，全部使用文本类型

编写的Html代码

[HTML] 查看纯副本 

1. < 跨度风格= “FONT-SIZE：18像素;” > <！DOCTYPE HTML >   
2. < HTML >  
3. < 头>  
4.     < 元HTTP的当量= “Content-Type的” 内容= “text / html的;字符集= UTF-8” >    
5.     < 标题> 输入提示后查询</ 标题>  
6.     < 风格类型= “文/ CSS” >   
7.         身体{  
8.             保证金：0;  
9.             高度：100％;  
10.             宽度：100％;  
11.             位置：绝对的;  
12.             字体大小：12像素;  
13.         }  
14.         #mapContainer {  
15.             位置：绝对的;  
16.             顶部：0;  
17.             左：0;  
18.             右：0;  
19.             底部：0;  
20.         }  
21.           
22.         ＃小费{  
23.             背景色：#FFF;  
24.             边框：1px的固体#CCC;  
25.             填充左：10px的;  
26.             填充右：2px的;  
27.             位置：绝对的;  
28.             最小高度：65px;  
29.             顶部：10px的;  
30.             字体大小：12像素;  
31.             右：10px的;  
32.             边界半径：的3px;  
33.             溢出：隐藏;  
34.             行高：20像素;  
35.             最小宽度：400像素;  
36.         }  
37.         #tip输入[ 类型= “按钮” ] {  
38.             背景颜色：＃0D9BF2;  
39.             高度：25像素;  
40.             文本对齐：中心;  
41.             行高：25像素;  
42.             颜色：#FFF;  
43.             字体大小：12像素;  
44.             边界半径：的3px;  
45.             概述：无;  
46.             边框：0;  
47.             光标：指针;  
48.         }  
49.           
50.         #tip输入[ 类型= “文本” ] {  
51.             高度：25像素;  
52.             边框：1px的固体#CCC;  
53.             填充左：5像素;  
54.             边界半径：的3px;  
55.             概述：无;  
56.         }  
57.           
58.         ＃{RESULT1  
59.             最大高度：300像素;  
60.         }  
61.     </ 样式>  
62. </ 头>  
63. < 身体>  
64.     < DIV ID = “mapContainer” > </ DIV >    
65.     < DIV ID = “小费” >   
66.         < b > 请输入关键字：</ b >  
67.         < 输入类型= “文本” ID = “关键词” 的名字= “关键字” 值= “” 的onkeydown = '的keydown（事件）“ 的风格= ”宽度：95％;“ />        
68.         < DIV ID = “RESULT1” 名称= “RESULT1” > </ DIV >    
69.     </ DIV >  
70.       
71.     < 脚本类型= “文/ JavaScript的” SRC = “http://webapi.amap.com/maps?v=1.3&key=你的密钥” > </ 脚本>    
72.     < 脚本类型= “文/ JavaScript的” >   
73.         变种  windowsArr  = [];  
74.         变种  标记 = [];  
75.         VAR  mapObj  =  新 AMap.Map（“mapContainer”，{  
76.             resizeEnable：真实，  
77.             观点：新AMap.View2D（{  
78.                 resizeEnable：真实，  
79.                 中心：新AMap.LngLat（113.385773,23.061727），//地图中心点  
80.                 变焦：13 //地图显示的缩放级别  
81.             }），  
82.             keyboardEnable：假的  
83.         }）;  
84.               
85.         的document.getElementById（“关键字”）.onkeyup  =  KEYDOWN ;  
86.         //输入提示  
87.         自动搜索功能（）{  
88.             VAR  关键字 =  文件。.getElementById（“关键词”）的价值;  
89.             VAR汽车;  
90.             //加载输入提示插件  
91.                 AMap.service（[“AMap.Autocomplete”]，函数（）{  
92.                 VAR  autoOptions  = {  
93.                     城市：“”//城市，默认全国  
94.                 };  
95.                 汽车 =  新 AMap.Autocomplete（autoOptions）;  
96.                 //查询成功时返回查询结果  
97.                 如果（keywords.length  >  0）{  
98.                     auto.search（关键字，功能（状态，结果）{  
99.                         autocomplete_CallBack（结果）;  
100.                     }）;  
101.                 }  
102.                 其他{  
103.                     的document.getElementById（“RESULT1”）.style.display  =  “无” ;  
104.                 }  
105.             }）;  
106.         }  
107.            
108.         //输出输入提示结果的回调函数  
109.         功能autocomplete_CallBack（数据）{  
110.             变种  resultStr  =  “” ;  
111.             VAR  tipArr  =  数据。提示;  
112.             如果（tipArr && tipArr.length > 0）{                   
113.                 对于（VAR  我 =  0 ;我  < tipArr.length ;我++）{   
114.                     resultStr + =“ < DIV ID = 'DIVID”+第（i + 1）+“' 的onmouseover ='openMarkerTipById（”+第（i + 1）    
115.                                 +“，这一点）”  的onclick = 'selectResult（“+ I +”）“ 的onmouseout ='onmouseout_MarkerStyle（”+（I + 1）   
116.                                 +“，这一点）'  风格= \”FONT-SIZE：13px的;光标：指针;填充：5像素5像素5像素为5px; \“”+“ 数据= ”+ tipArr [I] .adcode +“ > ”+ tipArr [我]。名称+“ < 跨度风格= ”颜色：＃C1C1C1;' > “+ tipArr [I]。区+” </ 跨度> </ DIV > “;   
117.                 }  
118.             }  
119.             其他{  
120.                 resultStr  =  “π__π亲，人家找不到结果<br />要不试试：<br /> 1，请确保所有字词拼写正确<br /> 2.尝试不同的关键字<br /> 3 。尝试更宽泛的关键字“ ;  
121.             }  
122.             的document.getElementById（“RESULT1”）.curSelect  = -1;  
123.             的document.getElementById（“RESULT1”）.tipArr  =  tipArr ;  
124.             的document.getElementById（“RESULT1”）.innerHTML  =  resultStr ;  
125.             的document.getElementById（“RESULT1”）.style.display  =  “块” ;  
126.         }  
127.            
128.         //输入提示框鼠标滑过时的样式  
129.         功能openMarkerTipById（点名，thiss）{//根据ID打开搜索结果点提示   
130.             thiss.style.background  =  '＃CAE1FF“ ;  
131.         }  
132.            
133.         //输入提示框鼠标移出时的样式  
134.         功能onmouseout_MarkerStyle（点名，thiss）{//鼠标移开后点样式恢复   
135.             thiss.style.background  =  “” ;  
136.         }  
137.            
138.         //从输入提示框中选择关键字并查询  
139.         功能selectResult（指数）{  
140.             如果（指数< 0 ）{  
141.                 返回;  
142.             }  
143.             如果（navigator.userAgent.indexOf（“MSIE”）  >  0）{  
144.                 的document.getElementById（“关键字”）.onpropertychange  =  零;  
145.                 的document.getElementById（“关键字”）.onfocus  =  focus_callback ;  
146.             }  
147.             //截取输入提示的关键字部分  
148.             变种  文本 =  文档.getElementById（“DIVID”+（索引+ 1））。innerHTML.replace（/ < [^ > ]。* ？> * < \ / [^ > ]。* ？> / g的“，” ）;  
149.             VAR  cityCode  =  文件.getElementById（“DIVID”+（索引+ 1））的getAttribute（“数据”）。  
150.             的document.getElementById（“关键字”）.value的 =  文本;  
151.             的document.getElementById（“RESULT1”）.style.display  =  “无” ;  
152.             //根据选择的输入提示关键字查询  
153.             mapObj.plugin（[“AMap.PlaceSearch”]，函数（）{         
154.                 VAR  msearch  =  新 AMap.PlaceSearch（）; //构造地点查询类  
155.                 AMap.event.addListener（msearch，“完成”，placeSearch_CallBack）; //查询成功时的回调函数  
156.                 msearch.setCity（cityCode）;  
157.                 msearch.search（文本）; //关键字查询查询  
158.             }）;  
159.         }  
160.            
161.         //定位选择输入提示关键字  
162.         功能focus_callback（）{  
163.             如果（navigator.userAgent.indexOf（“MSIE”）  >  0）{  
164.                 的document.getElementById（“关键字”）.onpropertychange  =  自动搜索;  
165.            }  
166.         }  
167.            
168.         //输出关键字查询结果的回调函数  
169.         功能placeSearch_CallBack（数据）{  
170.             //清空地图上的信息窗口和标记  
171.             windowsArr  = [];  
172.             标记     = [];  
173.             mapObj.clearMap（）;  
174.             变种  resultStr1  =  “” ;  
175.             VAR  poiArr  =  数据.poiList.pois;  
176.             VAR  RESULTCOUNT个 =  poiArr 。长度;  
177.             // allPrpos（poiArr [1]）;姓名，身份证，LNG，纬度，类型，地址，电话  
178.   
179.             对于（VAR  我 =  0 ;我  < RESULTCOUNT个;我++）{   
180.                 resultStr1 + =“ < DIV ID = 'DIVID”+第（i + 1）+“' 的onmouseover = 'openMarkerTipById1（”+ I +“时，此）' 的onmouseout= 'onmouseout_MarkerStyle（”+第（i + 1）+“，这）' 风格= \“FONT-SIZE：12px的;光标：指针;填充：0像素0 2px的4PX; 下边框：1px的固体＃C1FFC1; \“ > < 表> < TR > < TD > < IMG SRC = \”http://webapi.amap.com/images/“+（I + 1）+”巴纽\“ > </ TD > ”+“ < TD > < H3 > < 字体颜色= \”＃00a6ac \“ > 名称：”+ poiArr [I]。名称+“ </ 字体> </ H3 > ”;        
181.                     resultStr1 + = TipContents（poiArr [I] .TYPE，poiArr [I]。地址，poiArr [I]的.tel）+“ </ TD > </ TR > </ 表> </DIV > ”;  
182.                     VAR  经度 =  poiArr [I] .location.lng;  
183.                     VAR  纬度 =  poiArr [I] .location.lat;  
184.                     addStation（poiArr [I] .ID，poiArr [I] .name和经度，纬度，poiArr [I] .TYPE，poiArr [I]。地址，poiArr [I]的.tel）;  
185.                     addmarker（ⅰ，poiArr [I]）;  
186.             }  
187.             mapObj.setFitView（）;  
188.         }  
189.            
190.         //鼠标滑过查询结果改变背景样式，根据ID打开信息窗体  
191.         功能openMarkerTipById1（点名，thiss）{  
192.             thiss.style.background  =  '＃CAE1FF“ ;  
193.             windowsArr [点名]。开（mapObj，标记[点名]）;  
194.         }  
195.            
196.         //添加查询结果的标记和信息窗口     
197.         功能addmarker（I，D）{  
198.             VAR  lngX  =  ð .location.getLng（）;  
199.             VAR  latY  =  ð .location.getLat（）;  
200.             VAR  markerOption  = {  
201.                 图：mapObj，  
202.                 图标：“http://webapi.amap.com/images/”+第（i + 1）+“.PNG”，  
203.                 位置：新AMap.LngLat（lngX，latY）  
204.             };  
205.             VAR  月 =  新 AMap.Marker（markerOption）;           
206.             marker.push（新AMap.LngLat（lngX，latY））;  
207.            
208.             VAR  信息窗口 =  新 AMap.InfoWindow（{  
209.                 内容：“ < H3 > < 字体颜色= \”＃00a6ac \“ >   ”。“”+第（i + 1）+ d.name +“ </ 字体> </ H3 > ”+ TipContents（d.type， d.address，d.tel）   
210.                 大小：新AMap.Size（300，0），  
211.                 autoMove：真实，   
212.                 偏移：新AMap.Pixel（0，-30）  
213.             }）;  
214.             windowsArr.push（信息窗口）;  
215.             变种  AA  =  功能 （E）{infoWindow.open（mapObj，mar.getPosition（））;};  
216.             AMap.event.addListener（MAR，“鼠标悬停”，AA）;  
217.         }  
218.            
219.         //信息窗口显示内容  
220.         函数TipContents（类型，地址，电话）{//窗体内容  
221.             如果（类型 ==“”||  类型 ==“未定义”||  类型 == NULL ||  类型 ==“未定义”|| typeof运算  类型 ==“未定义”）{  
222.                 类型 =  “暂无” ;  
223.             }  
224.             如果（地址 ==“”||  地址 ==“未定义”||  地址 == NULL ||  地址 ==“未定义”|| typeof运算  地址 ==“未定义”）{  
225.                 地址 =  “暂无” ;  
226.             }  
227.             如果（电话： ==“”||  电话 ==“未定义”||  电话 == NULL ||  电话 ==“未定义”|| typeof运算  地址 ==“电话”）{  
228.                 电话 =  “暂无” ;  
229.             }  
230.             无功  海峡 =  “地址：”  +地址+“ < BR />   电话：”+电话+“  < BR />   类型：”+类型;    
231.             返回海峡;  
232.         }  
233.         功能KEYDOWN（事件）{  
234.             VAR  键 =（事件|| window.event）.keyCode;  
235.             VAR  的结果 =  文件.getElementById（“RESULT1”）  
236.             VAR  CUR  =  导致.curSelect;  
237.             如果（关键=== 40）{//下来  
238.                 如果（当前+ 1  < result.childNodes.length ）{   
239.                     如果（result.childNodes [CUR]）{  
240.                         result.childNodes [CUR] .style.background = '' ;  
241.                     }  
242.                     result.curSelect = CUR +1;  
243.                     result.childNodes [CUR + 1〕.style.background = '＃CAE1FF' ;  
244.                     的document.getElementById（“关键字”）.value的 =  导致.tipArr [CUR + 1]。名称;  
245.                 }  
246.             }否则如果（关键=== 38）{//起来  
247.                 如果（CUR-1 > = 0）{  
248.                     如果（result.childNodes [CUR]）{  
249.                         result.childNodes [CUR] .style.background = '' ;  
250.                     }  
251.                     result.curSelect = CUR -1;  
252.                     result.childNodes [CUR-1] .style.background = '＃CAE1FF' ;  
253.                     的document.getElementById（“关键字”）.value的 =  导致.tipArr [CUR-1]。名称;  
254.                 }  
255.             }如果其他人（关键 === 13）{  
256.                 VAR  RES  =  文件.getElementById（“RESULT1”）;  
257.                 如果（RES && RES ['curSelect']！== -1）{  
258.                     selectResult（的document.getElementById（“RESULT1”）curSelect）;  
259.                 }  
260.             }其他{  
261.                 自动搜索（）;  
262.             }  
263.         }  
264.         / *   
265.         *用来遍历指定对象所有的属性名称和值   
266.         * OBJ需要遍历的对象   
267.         *作者：马喷   
268.         * /   
269.         功能allPrpos（OBJ）{   
270.             //用来保存所有的属性名称和值   
271.             变种  道具 =  “”  ;   
272.             //开始遍历   
273.             对于（OBJ中的变种P）{   
274.             //方法   
275.             如果（typeof运算（OBJ [P]）==“功能”）{   
276.             物镜[p]（显示）;   
277.             }其他{   
278.             // p为属性名称，OBJ [P]为对应属性的值   
279.             道具+ = P +“=”+ OBJ [P] +“\ t”的;   
280.             }   
281.             }   
282.             //最后显示所有的属性   
283.             警报（道具）;   
284.         }   
285.   
286.   
287.         //将数据插入数据库  
288.         功能addStation（ID，姓名，LNG，纬度，类型，地址，电话）{  
289.             VAR  文件路径 =  位置.href.substring（0，location.href.indexOf（“GaodeToaccess.htm”））;    
290.             VAR  路径 =  文件路径 +“hzyGaoDe.mdb”    
291.             //去掉字符串中最前面的“文件：//”这8个字符。    
292.             pathpath  =  路径.substring（8）;    
293.            //警报（pathpath）;  
294.             VAR  康恩= 新 的ActiveXObject（“ADODB.Connection”）;  
295.             conn.Open（“ DBQ = ”+ pathpath +“ ; DRIVER = {Microsoft Access驱动程序（* .mdb）中};”）;  
296.             VAR  SQL  =  “插入POI（ID，姓名，LNG，纬度，类型，地址，电话）VALUES（'” +身份证+“”，“”+名字+“”，“”+ LNG +“”，“”+纬度+“ '，'“+类型+”“，”“+地址+”“，”“+电话+”'）“;  
297.             //警报（SQL）;  
298.             尝试{  
299.                 conn.execute（SQL）;  
300.             }  
301.             赶上（E）{  
302.                 文件撰写（e.description）;  
303.             }  
304.         }     
305.     </ 脚本>  
306. </ 身体>  
307. </ HTML >                         
308. </ 跨度>  

三，实验效果

打开网页，在关键词搜索框中输入要搜索的地点

在下拉列表框中选择对应的地点

发现地图出现与搜索地点相关的几个点

然后打开访问数据库表

发现记录数增加

四，实验注意要点

连接数据库时MDB文件必须给出绝对路径

这里采用的方法是把MDB文件和HTML文件放在同一目录下，利用HTML文件获取目录的路径

代码片段如下

变种文件路径= location.href.substring（0，location.href.indexOf（“GaodeToaccess.htm”））; 

           VAR路径=文件路径+“hzyGaoDe.mdb” 

           //去掉字符串中最前面的“文件：//”这8个字符。 

           pathpath = path.substring（8）;

                     varconn =新的ActiveXObject（“ADODB.Connection”）;

                     conn.Open（“DBQ =”+ pathpath +“; DRIVER = {MicrosoftAccess驱动程序（* .mdb）中};”）;

 

主键不要重复

插入数据时传的ID最好使用高德地图点对象的身份证，这样可以保证主键不会重复，数据可以顺利插入

代码片段如下

addStation（poiArr [I] .ID，poiArr [I] .name和经度，纬度，poiArr [I] .TYPE，poiArr [I]。地址，poiArr [I]的.tel）;

 

关键密钥

<脚本类型=“文/ JavaScript的”SRC =“http://webapi.amap.com/maps?v=1.3&key=xxx”> </ SCRIPT>

要填入你自己申请的密钥