从高德地图抓取数据

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

一，工具

1，VisualStudio2010

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

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

二，步骤

获取高德地图点的属性

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

建立访问数据库表

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

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

编写的Html代码

 < 跨度风格= “FONT-SIZE：18像素;” > <！DOCTYPE HTML >
 < HTML >
 < 头>
     < 元HTTP的当量= “Content-Type的” 内容= “text / html的;字符集= UTF-8” >
     < 标题> 输入提示后查询标题>
     < 风格类型= “文/ CSS” >
         身体{
             保证金：0;
             高度：100％;
             宽度：100％;
             位置：绝对的;
             字体大小：12像素;
         }
         #mapContainer {
             位置：绝对的;
             顶部：0;
             左：0;
             右：0;
             底部：0;
         }

         ＃小费{
             背景色：#FFF;
             边框：1px的固体#CCC;
             填充左：10px的;
             填充右：2px的;
             位置：绝对的;
             最小高度：65px;
             顶部：10px的;
             字体大小：12像素;
             右：10px的;
             边界半径：的3px;
             溢出：隐藏;
             行高：20像素;
             最小宽度：400像素;
         }
         #tip输入[ 类型= “按钮” ] {
             背景颜色：＃0D9BF2;
             高度：25像素;
             文本对齐：中心;
             行高：25像素;
             颜色：#FFF;
             字体大小：12像素;
             边界半径：的3px;
             概述：无;
             边框：0;
             光标：指针;
         }

         #tip输入[ 类型= “文本” ] {
             高度：25像素;
             边框：1px的固体#CCC;
             填充左：5像素;
             边界半径：的3px;
             概述：无;
         }

         ＃{RESULT1
             最大高度：300像素;
         }
     样式>
 头>
 < 身体>
     < DIV ID = “mapContainer” > DIV >
     < DIV ID = “小费” >
         < b > 请输入关键字：b >
         < 输入类型= “文本” ID = “关键词” 的名字= “关键字” 值= “” 的onkeydown = '的keydown（事件）“ 的风格= ”宽度：95％;“ />
         < DIV ID = “RESULT1” 名称= “RESULT1” > DIV >
     DIV >

     < 脚本类型= “文/ JavaScript的” SRC = “http://webapi.amap.com/maps?v=1.3&key=你的密钥” > 脚本>
     < 脚本类型= “文/ JavaScript的” >
         变种  windowsArr  = [];
         变种  标记 = [];
         VAR  mapObj  =  新 AMap.Map（“mapContainer”，{
             resizeEnable：真实，
             观点：新AMap.View2D（{
                 resizeEnable：真实，
                 中心：新AMap.LngLat（113.385773,23.061727），//地图中心点
                 变焦：13 //地图显示的缩放级别
             }），
             keyboardEnable：假的
         }）;

         的document.getElementById（“关键字”）.onkeyup  =  KEYDOWN ;
         //输入提示
         自动搜索功能（）{
             VAR  关键字 =  文件。.getElementById（“关键词”）的价值;
             VAR汽车;
             //加载输入提示插件
                 AMap.service（[“AMap.Autocomplete”]，函数（）{
                 VAR  autoOptions  = {
                     城市：“”//城市，默认全国
                 };
                 汽车 =  新 AMap.Autocomplete（autoOptions）;
                 //查询成功时返回查询结果
                 如果（keywords.length  >  0）{
                     auto.search（关键字，功能（状态，结果）{
                         autocomplete_CallBack（结果）;
                     }）;
                 }
                 其他{
                     的document.getElementById（“RESULT1”）.style.display  =  “无” ;
                 }
             }）;
         }

         //输出输入提示结果的回调函数
         功能autocomplete_CallBack（数据）{
             变种  resultStr  =  “” ;
             VAR  tipArr  =  数据。提示;
             如果（tipArr && tipArr.length > 0）{
                 对于（VAR  我 =  0 ;我  < tipArr.length ;我++）{
                     resultStr + =“ < DIV ID = 'DIVID”+第（i + 1）+“' 的onmouseover ='openMarkerTipById（”+第（i + 1）
                                 +“，这一点）”  的onclick = 'selectResult（“+ I +”）“ 的onmouseout ='onmouseout_MarkerStyle（”+（I + 1）
                                 +“，这一点）'  风格= \”FONT-SIZE：13px的;光标：指针;填充：5像素5像素5像素为5px; \“”+“ 数据= ”+ tipArr [I] .adcode +“ > ”+ tipArr [我]。名称+“ < 跨度风格= ”颜色：＃C1C1C1;' > “+ tipArr [I]。区+” 跨度> DIV > “;
                 }
             }
             其他{
                 resultStr  =  “π__π亲，人家找不到结果要不试试： 1，请确保所有字词拼写正确 2.尝试不同的关键字 3 。尝试更宽泛的关键字“ ;
             }
             的document.getElementById（“RESULT1”）.curSelect  = -1;
             的document.getElementById（“RESULT1”）.tipArr  =  tipArr ;
             的document.getElementById（“RESULT1”）.innerHTML  =  resultStr ;
             的document.getElementById（“RESULT1”）.style.display  =  “块” ;
         }

         //输入提示框鼠标滑过时的样式
         功能openMarkerTipById（点名，thiss）{//根据ID打开搜索结果点提示
             thiss.style.background  =  '＃CAE1FF“ ;
         }

         //输入提示框鼠标移出时的样式
         功能onmouseout_MarkerStyle（点名，thiss）{//鼠标移开后点样式恢复
             thiss.style.background  =  “” ;
         }

         //从输入提示框中选择关键字并查询
         功能selectResult（指数）{
             如果（指数< 0 ）{
                 返回;
             }
             如果（navigator.userAgent.indexOf（“MSIE”）  >  0）{
                 的document.getElementById（“关键字”）.onpropertychange  =  零;
                 的document.getElementById（“关键字”）.onfocus  =  focus_callback ;
             }
             //截取输入提示的关键字部分
             变种  文本 =  文档.getElementById（“DIVID”+（索引+ 1））。innerHTML.replace（/ < [^ > ]。* ？> * < \ / [^ > ]。* ？> / g的“，” ）;
             VAR  cityCode  =  文件.getElementById（“DIVID”+（索引+ 1））的getAttribute（“数据”）。
             的document.getElementById（“关键字”）.value的 =  文本;
             的document.getElementById（“RESULT1”）.style.display  =  “无” ;
             //根据选择的输入提示关键字查询
             mapObj.plugin（[“AMap.PlaceSearch”]，函数（）{
                 VAR  msearch  =  新 AMap.PlaceSearch（）; //构造地点查询类
                 AMap.event.addListener（msearch，“完成”，placeSearch_CallBack）; //查询成功时的回调函数
                 msearch.setCity（cityCode）;
                 msearch.search（文本）; //关键字查询查询
             }）;
         }

         //定位选择输入提示关键字
         功能focus_callback（）{
             如果（navigator.userAgent.indexOf（“MSIE”）  >  0）{
                 的document.getElementById（“关键字”）.onpropertychange  =  自动搜索;
            }
         }

         //输出关键字查询结果的回调函数
         功能placeSearch_CallBack（数据）{
             //清空地图上的信息窗口和标记
             windowsArr  = [];
             标记     = [];
             mapObj.clearMap（）;
             变种  resultStr1  =  “” ;
             VAR  poiArr  =  数据.poiList.pois;
             VAR  RESULTCOUNT个 =  poiArr 。长度;
             // allPrpos（poiArr [1]）;姓名，身份证，LNG，纬度，类型，地址，电话

             对于（VAR  我 =  0 ;我  < RESULTCOUNT个;我++）{
                 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 > ”;
                     resultStr1 + = TipContents（poiArr [I] .TYPE，poiArr [I]。地址，poiArr [I]的.tel）+“ TD > TR > 表> DIV > ”;
                     VAR  经度 =  poiArr [I] .location.lng;
                     VAR  纬度 =  poiArr [I] .location.lat;
                     addStation（poiArr [I] .ID，poiArr [I] .name和经度，纬度，poiArr [I] .TYPE，poiArr [I]。地址，poiArr [I]的.tel）;
                     addmarker（ⅰ，poiArr [I]）;
             }
             mapObj.setFitView（）;
         }

         //鼠标滑过查询结果改变背景样式，根据ID打开信息窗体
         功能openMarkerTipById1（点名，thiss）{
             thiss.style.background  =  '＃CAE1FF“ ;
             windowsArr [点名]。开（mapObj，标记[点名]）;
         }

         //添加查询结果的标记和信息窗口
         功能addmarker（I，D）{
             VAR  lngX  =  ð .location.getLng（）;
             VAR  latY  =  ð .location.getLat（）;
             VAR  markerOption  = {
                 图：mapObj，
                 图标：“http://webapi.amap.com/images/”+第（i + 1）+“.PNG”，
                 位置：新AMap.LngLat（lngX，latY）
             };
             VAR  月 =  新 AMap.Marker（markerOption）;
             marker.push（新AMap.LngLat（lngX，latY））;

             VAR  信息窗口 =  新 AMap.InfoWindow（{
                 内容：“ < H3 > < 字体颜色= \”＃00a6ac \“ >   ”。“”+第（i + 1）+ d.name +“ 字体> H3 > ”+ TipContents（d.type， d.address，d.tel）
                 大小：新AMap.Size（300，0），
                 autoMove：真实，
                 偏移：新AMap.Pixel（0，-30）
             }）;
             windowsArr.push（信息窗口）;
             变种  AA  =  功能 （E）{infoWindow.open（mapObj，mar.getPosition（））;};
             AMap.event.addListener（MAR，“鼠标悬停”，AA）;
         }

         //信息窗口显示内容
         函数TipContents（类型，地址，电话）{//窗体内容
             如果（类型 ==“”||  类型 ==“未定义”||  类型 == NULL ||  类型 ==“未定义”|| typeof运算  类型 ==“未定义”）{
                 类型 =  “暂无” ;
             }
             如果（地址 ==“”||  地址 ==“未定义”||  地址 == NULL ||  地址 ==“未定义”|| typeof运算  地址 ==“未定义”）{
                 地址 =  “暂无” ;
             }
             如果（电话： ==“”||  电话 ==“未定义”||  电话 == NULL ||  电话 ==“未定义”|| typeof运算  地址 ==“电话”）{
                 电话 =  “暂无” ;
             }
             无功  海峡 =  “地址：”  +地址+“ < BR />   电话：”+电话+“  < BR />   类型：”+类型;
             返回海峡;
         }
         功能KEYDOWN（事件）{
             VAR  键 =（事件|| window.event）.keyCode;
             VAR  的结果 =  文件.getElementById（“RESULT1”）
             VAR  CUR  =  导致.curSelect;
             如果（关键=== 40）{//下来
                 如果（当前+ 1  < result.childNodes.length ）{
                     如果（result.childNodes [CUR]）{
                         result.childNodes [CUR] .style.background = '' ;
                     }
                     result.curSelect = CUR +1;
                     result.childNodes [CUR + 1〕.style.background = '＃CAE1FF' ;
                     的document.getElementById（“关键字”）.value的 =  导致.tipArr [CUR + 1]。名称;
                 }
             }否则如果（关键=== 38）{//起来
                 如果（CUR-1 > = 0）{
                     如果（result.childNodes [CUR]）{
                         result.childNodes [CUR] .style.background = '' ;
                     }
                     result.curSelect = CUR -1;
                     result.childNodes [CUR-1] .style.background = '＃CAE1FF' ;
                     的document.getElementById（“关键字”）.value的 =  导致.tipArr [CUR-1]。名称;
                 }
             }如果其他人（关键 === 13）{
                 VAR  RES  =  文件.getElementById（“RESULT1”）;
                 如果（RES && RES ['curSelect']！== -1）{
                     selectResult（的document.getElementById（“RESULT1”）curSelect）;
                 }
             }其他{
                 自动搜索（）;
             }
         }
         / *
         *用来遍历指定对象所有的属性名称和值
         * OBJ需要遍历的对象
         *作者：马喷
         * /
         功能allPrpos（OBJ）{
             //用来保存所有的属性名称和值
             变种  道具 =  “”  ;
             //开始遍历
             对于（OBJ中的变种P）{
             //方法
             如果（typeof运算（OBJ [P]）==“功能”）{
             物镜[p]（显示）;
             }其他{
             // p为属性名称，OBJ [P]为对应属性的值
             道具+ = P +“=”+ OBJ [P] +“\ t”的;
             }
             }
             //最后显示所有的属性
             警报（道具）;
         }


         //将数据插入数据库
         功能addStation（ID，姓名，LNG，纬度，类型，地址，电话）{
             VAR  文件路径 =  位置.href.substring（0，location.href.indexOf（“GaodeToaccess.htm”））;
             VAR  路径 =  文件路径 +“hzyGaoDe.mdb”
             //去掉字符串中最前面的“文件：//”这8个字符。
             pathpath  =  路径.substring（8）;
            //警报（pathpath）;
             VAR  康恩= 新 的ActiveXObject（“ADODB.Connection”）;
             conn.Open（“ DBQ = ”+ pathpath +“ ; DRIVER = {Microsoft Access驱动程序（* .mdb）中};”）;
             VAR  SQL  =  “插入POI（ID，姓名，LNG，纬度，类型，地址，电话）VALUES（'” +身份证+“”，“”+名字+“”，“”+ LNG +“”，“”+纬度+“ '，'“+类型+”“，”“+地址+”“，”“+电话+”'）“;
             //警报（SQL）;
             尝试{
                 conn.execute（SQL）;
             }
             赶上（E）{
                 文件撰写（e.description）;
             }
         }
     脚本>
 身体>
 HTML >
 跨度>

三，实验效果

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

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

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

然后打开访问数据库表

发现记录数增加

四，实验注意要点

连接数据库时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”>

要填入你自己申请的密钥