从高德地图抓取数据

原创 2015年03月30日 21:14:34

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


一、工具


1、VisualStudio2010

或其他Html编辑器
2、Access数据库

使用mysql或其他数据库需要服务器支持,这里为了方便就使用access
3、IE浏览器


二、步骤


获取高德地图点的属性

使用JavaScript代码alert 出poiArr[i]对象的所有属性,为创建表格做准备


建立Access数据库表

依据上面所得出的数据,创建poi表,字段有id(主键)、name、type、latitude、lotitude、longitude、address和tel。

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


编写Html代码


<span style="font-size:18px;"><!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>输入提示后查询</title>
	<style type="text/css">
		body{
			margin:0;
			height:100%;
			width:100%;
			position:absolute;
			font-size:12px;
		}
		#mapContainer{
			position: absolute;
			top:0;
			left: 0;
			right:0;
			bottom:0;
		}
		
		#tip{
			background-color:#fff;
			border:1px solid #ccc;
			padding-left:10px;
			padding-right:2px;
			position:absolute;
			min-height:65px;
			top:10px;
			font-size:12px;
			right:10px;
			border-radius:3px;
			overflow:hidden;
			line-height:20px;
			min-width:400px;
		}
		#tip input[type="button"]{
			background-color: #0D9BF2;
			height:25px;
			text-align:center;
			line-height:25px;
			color:#fff;
			font-size:12px;
			border-radius:3px;
			outline: none;
			border:0;
			cursor:pointer;
		}
		
		#tip input[type="text"]{
			height:25px;
			border:1px solid #ccc;
			padding-left:5px;
			border-radius:3px;
			outline:none;
		}
		
		#result1{
			max-height:300px;
		}
	</style>
</head>
<body>
    <div id="mapContainer" ></div>
    <div id="tip">
        <b>请输入关键字:</b>
        <input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style="width: 95%;"/>
        <div id="result1" name="result1"></div>
    </div>
    
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的密钥"></script>
	<script type="text/javascript">
		var windowsArr = [];
		var marker = [];
		var mapObj = new AMap.Map("mapContainer", {
			resizeEnable: true,
	        view: new AMap.View2D({
	        	resizeEnable: true,
	            center:new AMap.LngLat(113.385773,23.061727),//地图中心点
	            zoom:13//地图显示的缩放级别
	        }),
	        keyboardEnable:false
	    });
			
	    document.getElementById("keyword").onkeyup = keydown;
		//输入提示
		function autoSearch() {
		    var keywords = document.getElementById("keyword").value;
		    var auto;
		    //加载输入提示插件
		        AMap.service(["AMap.Autocomplete"], function() {
		        var autoOptions = {
		            city: "" //城市,默认全国
		        };
		        auto = new AMap.Autocomplete(autoOptions);
		        //查询成功时返回查询结果
		        if ( keywords.length > 0) {
		            auto.search(keywords, function(status, result){
		            	autocomplete_CallBack(result);
		            });
		        }
		        else {
		            document.getElementById("result1").style.display = "none";
		        }
		    });
		}
		 
		//输出输入提示结果的回调函数
		function autocomplete_CallBack(data) {
		    var resultStr = "";
		    var tipArr = data.tips;
		    if (tipArr&&tipArr.length>0) {                 
		        for (var i = 0; i < tipArr.length; i++) {
		            resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1)
		                        + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1)
		                        + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>";
		        }
		    }
		    else  {
		        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 = "block";
		}
		 
		//输入提示框鼠标滑过时的样式
		function openMarkerTipById(pointid, thiss) {  //根据id打开搜索结果点tip 
		    thiss.style.background = '#CAE1FF';
		}
		 
		//输入提示框鼠标移出时的样式
		function onmouseout_MarkerStyle(pointid, thiss) {  //鼠标移开后点样式恢复 
		    thiss.style.background = "";
		}
		 
		//从输入提示框中选择关键字并查询
		function selectResult(index) {
		    if(index<0){
		        return;
		    }
		    if (navigator.userAgent.indexOf("MSIE") > 0) {
		        document.getElementById("keyword").onpropertychange = null;
		        document.getElementById("keyword").onfocus = focus_callback;
		    }
		    //截取输入提示的关键字部分
		    var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,"");
			var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data');
		    document.getElementById("keyword").value = text;
		    document.getElementById("result1").style.display = "none";
		    //根据选择的输入提示关键字查询
		    mapObj.plugin(["AMap.PlaceSearch"], function() {       
		        var msearch = new AMap.PlaceSearch();  //构造地点查询类
		        AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查询成功时的回调函数
				msearch.setCity(cityCode);
		        msearch.search(text);  //关键字查询查询
		    });
		}
		 
		//定位选择输入提示关键字
		function focus_callback() {
		    if (navigator.userAgent.indexOf("MSIE") > 0) {
		        document.getElementById("keyword").onpropertychange = autoSearch;
		   }
		}
		 
		//输出关键字查询结果的回调函数
		function placeSearch_CallBack(data) {
		    //清空地图上的InfoWindow和Marker
		    windowsArr = [];
		    marker     = [];
		    mapObj.clearMap();
		    var resultStr1 = "";
		    var poiArr = data.poiList.pois;
		    var resultCount = poiArr.length;
		   	//allPrpos ( poiArr[1] );name,id,lng,lat,type,address,tel

		    for (var i = 0; i < resultCount; i++) {
		        resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名称: " + poiArr[i].name + "</font></h3>";
		            resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>";
		            var longitude = poiArr[i].location.lng;
             		var latitude = poiArr[i].location.lat;
             		addStation(poiArr[i].id,poiArr[i].name,longitude,latitude,poiArr[i].type,poiArr[i].address,poiArr[i].tel);
		            addmarker(i, poiArr[i]);
		    }
		    mapObj.setFitView();
		}
		 
		//鼠标滑过查询结果改变背景样式,根据id打开信息窗体
		function openMarkerTipById1(pointid, thiss) {
		    thiss.style.background = '#CAE1FF';
		    windowsArr[pointid].open(mapObj, marker[pointid]);
		}
		 
		//添加查询结果的marker&infowindow   
		function addmarker(i, d) {
		    var lngX = d.location.getLng();
		    var latY = d.location.getLat();
		    var markerOption = {
		        map:mapObj,
		        icon:"http://webapi.amap.com/images/" + (i + 1) + ".png",
		        position:new AMap.LngLat(lngX, latY)
		    };
		    var mar = new AMap.Marker(markerOption);         
		    marker.push(new AMap.LngLat(lngX, latY));
		 
		    var infoWindow = new AMap.InfoWindow({
		        content:"<h3><font color=\"#00a6ac\">  " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel),
		        size:new AMap.Size(300, 0),
		        autoMove:true, 
		        offset:new AMap.Pixel(0,-30)
		    });
		    windowsArr.push(infoWindow);
		    var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());};
		    AMap.event.addListener(mar, "mouseover", aa);
		}
		 
		//infowindow显示内容
		function TipContents(type, address, tel) {  //窗体内容
		    if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") {
		        type = "暂无";
		    }
		    if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") {
		        address = "暂无";
		    }
		    if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") {
		        tel = "暂无";
		    }
		    var str = "  地址:" + address + "<br />  电话:" + tel + " <br />  类型:" + type;
		    return str;
		}
		function keydown(event){
		    var key = (event||window.event).keyCode;
		    var result = document.getElementById("result1")
		    var cur = result.curSelect;
		    if(key===40){//down
		        if(cur + 1 < result.childNodes.length){
		            if(result.childNodes[cur]){
		                result.childNodes[cur].style.background='';
		            }
		            result.curSelect=cur+1;
		            result.childNodes[cur+1].style.background='#CAE1FF';
		            document.getElementById("keyword").value = result.tipArr[cur+1].name;
		        }
		    }else if(key===38){//up
		        if(cur-1>=0){
		            if(result.childNodes[cur]){
		                result.childNodes[cur].style.background='';
		            }
		            result.curSelect=cur-1;
		            result.childNodes[cur-1].style.background='#CAE1FF';
		            document.getElementById("keyword").value = result.tipArr[cur-1].name;
		        }
		    }else if(key === 13){
		        var res = document.getElementById("result1");
				if(res && res['curSelect'] !== -1){
					selectResult(document.getElementById("result1").curSelect);
				}
		    }else{
		        autoSearch();
		    }
		}
		/* 
		* 用来遍历指定对象所有的属性名称和值 
		* obj 需要遍历的对象 
		* author: Jet Mah 
		*/ 
		function allPrpos ( obj ) { 
			// 用来保存所有的属性名称和值 
			var props = "" ; 
			// 开始遍历 
			for ( var p in obj ){ 
			// 方法 
			if ( typeof ( obj [ p ]) == " function " ){ 
			obj [ p ]() ; 
			} else { 
			// p 为属性名称,obj[p]为对应属性的值 
			props += p + " = " + obj [ p ] + " \t " ; 
			} 
			} 
			// 最后显示所有的属性 
			alert ( props ) ; 
		} 


		//Insert data into the database
        function addStation(id,name,lng,lat,type,address,tel){
        	var filePath = location.href.substring(0, location.href.indexOf("GaodeToaccess.htm"));  
            var path = filePath + "hzyGaoDe.mdb";  
            //去掉字符串中最前面的"files://"这8个字符。  
            pathpath = path.substring(8);  
           //alert(pathpath);
			var conn=new ActiveXObject("ADODB.Connection");
			conn.Open("DBQ="+pathpath+";DRIVER={Microsoft Access Driver (*.mdb)};");
			var sql = "insert into poi(id,name,lng,lat,type,address,tel) values('"+id+"','"+name+"','"+lng+"','"+lat+"','"+type+"','"+address+"','"+tel+"')";
			//alert(sql);
			try{
				conn.execute(sql);
			}
			catch(e){
				document.write(e.description);
			}
		}	
	</script>
</body>
</html>						
</span>


三、实验效果

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

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

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

然后打开access数据库表

发现记录数增加


四、实验注意要点


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

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

代码片段如下

var filePath = location.href.substring(0,location.href.indexOf("GaodeToaccess.htm")); 

           var path = filePath + "hzyGaoDe.mdb"; 

           //去掉字符串中最前面的"files://"这8个字符。 

           pathpath = path.substring(8);

                     varconn=new ActiveXObject("ADODB.Connection");

                     conn.Open("DBQ="+pathpath+";DRIVER={MicrosoftAccess Driver (*.mdb)};");

 


主键不要重复

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

代码片段如下

addStation(poiArr[i].id,poiArr[i].name,longitude,latitude,poiArr[i].type,poiArr[i].address,poiArr[i].tel);

 

Key密钥

<script type="text/javascript"src="http://webapi.amap.com/maps?v=1.3&key=xxx"></script>

要填入你自己申请的密钥



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

pyCharm最新2017激活码

pyCharm最近激活码过期,找到一个最新的activation code,可用期为2017一年。如下:BIG3CLIK6F-eyJsaWNlbnNlSWQiOiJCSUczQ0xJSzZGIiwib...

百度地图POI抓取——python

之前网上有看到用javascript写的抓取百度地图POI的程序,效果还不错。作为python初学者,尝试用python写了下面代码,如有错误,还望大神们提供建议。 # -*- coding: utf...

Python获取高德地图POI

# -*- encoding: utf-8 -*-# coding:utf-8 from xlwt import Workbook from tempfile import TemporaryFile...

使用python及百度API对百度poi数据进行爬取(三)

其实一和二就已经基本完成了任务。写三,是因为应用到具体情境中,出现了点问题,需要解决一下。 主要问题:我们单位底图用的是xian1980坐标,而我爬到的数据是百度坐标。 不能用。 解决办法:我最开始从...

基于python和amap(高德地图)web api的爬虫,用于搜索某POI点

基于python和amap(高德地图)web api的爬虫,用于搜索某POI点  目的: 通过Python实现的爬虫技术,及高德地图提供的web api,来获取地图上的POI点及其相关信息 方法: ...

基于python的POI数据爬取、处理和使用(一)

对于刚入职的半年的“新人”,多听听领导的建议还是大有裨益的。我们主任就说,新人要首先熟悉一下单位的业务,以及单位有哪些数据。在工作中,我就尽可能的了解一下这些,直到,我发现了POI数据。单位采集POI...

使用python及百度API对百度poi数据进行爬取(二)

开始按计划实现流程。 一  区域分割。 这个步骤是整个方案比较关键的一步,区域分割的要求如下。不能太大,因为一个区域一个类别的POI数目不能超过400;覆盖要完全,要包括全市的市域;不能有重叠。 1 ...

基于python和amap(高德地图)web api的爬虫,用于搜索某POI点

目的: 通过Python实现的爬虫技术,及高德地图提供的web api,来获取地图上的POI点及其相关信息 方法: 1.通过Python的urllib模块来处理网络请求和响应,向高德地图发送请求,并接...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)