老板是搞交通的,要我从高德上抓数据放到自己的数据库中。说做就做!
一,工具
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 = “π__π亲,人家找不到结果<br />要不试试:<br /> 1,请确保所有字词拼写正确<br /> 2.尝试不同的关键字<br /> 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”> </ SCRIPT>
要填入你自己申请的密钥