json and ajax code Memo...

最新推荐文章于 2024-09-24 20:46:50 发布

蔷薇枝

最新推荐文章于 2024-09-24 20:46:50 发布

阅读量859

点赞数

分类专栏：百度地图API 文章标签： html json ajax 百度地图API

本文链接：https://blog.csdn.net/chrissata/article/details/26091337

版权

百度地图API 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

批量查询给定地址的经纬度的HTML代码

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3h025GhfUrYLgqDf3rDP8a2o"></script>
<title>获取城市/街道对应的经纬度数据</title>
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
</head>
<!--  js part.-->
<script type="text/javascript">

var file ="";
var geodata="";
var latilongArr={};
var data2write="";
function checkTPFile()
{
file = document.getElementById("geofile").files[0];
if (!file)
{  
    alert("请上传待查询经纬度的城市文件列表(csv/txt)");  
    return ;  
} 
else {  
        if (file.type.match('.csv') || file.type.match('.txt')) {  
            alert("文件必须是text(txt,csv)");  
            infile = "";  
            return ;  
        }  
    }  
	readDataFromFile();  
}

function readDataFromFile()
{
	if(!file)
	{
		alert("尚未选择文件！");
		return;
	}
	if (! window.FileReader ) {  
    alert("Not supported by your browser!");  
	}
	var reader = new FileReader(); 
	reader.onloadend  = function (evt) {
		
		
		geodata = evt.target.result;
		if (geodata ||geodata!="")
		{	
			queryLatiAndLong();//Latitude and longitude
			writeDataIntoFile(geodata,latilongArr);
		}	
	else
	{
		alert("The file is empty!");
	}
	} 
	reader.οnerrοr=function(e){
		alert(e.error.name )
	}
	var x = reader.readAsText(file,'gb2312');


}
String.prototype.trim=function() {  
    return this.replace(/(^\s*)|(\s*$)/g,'');  
}; 
function queryLatiAndLong()
{
	latilongArr=[];// clear the array
	var lineArr = new Array();
	lineArr = geodata.split('\n');
	document.getElementById("lines").innerHTML="总共条数："+lineArr.length;
	if (lineArr.length>60)
		alert("批量查询数目超过60，建议将文件切分后查询！\r\n查询量过大将导致错误应答或远程系统不响应！");
	document.getElementById("statusLine").innerHTML="文件共计"+lineArr.length+"个地址";
	var map = new BMap.Map("map");
	var localSearch =  new BMap.LocalSearch(map);
	localSearch.setSearchCompleteCallback(
		function (searchResult) 
		{  
			var poi = searchResult.getPoi(0);
			var keyword=searchResult.keyword;
			var jsonObj={};
			jsonObj.keyword=keyword;
			if (poi)
			{
				var res = ","+poi.point.lng + "," + poi.point.lat;
				
				jsonObj.value=res;
			}
			else{
				jsonObj.value=",-1,-1";	
			}
			latilongArr.push(jsonObj);
			writeDataIntoFile(geodata,latilongArr);
			var msg = "目前已解析"+latilongArr.length+"个地址的经纬度信息。";
			if (latilongArr.length==lineArr.length)
				msg+="  解析完成！";
			document.getElementById("statusLine").innerHTML=msg;
		}
	);
	for (key in lineArr)
	{	
		keyword = lineArr[key].trim().split(",")[0];			
		localSearch.search(keyword);
	}
		
}
function querySingle(localSearch,keyword,label)
{
	localSearch.search(keyword);
}
function refreshData()
{
	writeDataIntoFile(geodata,latilongArr);
}

function writeDataIntoFile(geodata,latilongArr)
{
	var wfile=file+".lldata.txt";
	var i =0;
	var line="";
	data2write="";
	lineArr = geodata.split('\n');	
	for(i in latilongArr){ 
		data2write+=latilongArr[i].keyword+latilongArr[i].value+"\r\n";		
	}
	document.getElementById("txt").value=data2write;
	//document.getElementById("txt").innerHTML=data2write;

	
}
function copyResult() //windows copy to clipboard. not compatile with firefox.
{
	obj=document.getElementById("txt");
	obj.select();
	js=obj.createTextRange();
	js.execCommand("Copy")
	alert("复制成功!");
}
function copy2Clipboard(txt){
		if(window.clipboardData){
			window.clipboardData.clearData();
			window.clipboardData.setData("Text",txt);
		}
		else if(navigator.userAgent.indexOf("Opera")!=-1){
			window.location=txt;
		}
		else if(window.netscape){
			try{
				netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			}
			catch(e){
				alert("您的firefox安全限制限制您进行剪贴板操作!\nNo longer support copy to clipboard function.\nPlease press copy/select button and Ctrl+C.");
				return false;
			}
			var clip=Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
			if(!clip)return;
			var trans=Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
			if(!trans)return;
			trans.addDataFlavor('text/unicode');
			var str=new Object();
			var len=new Object();
			var str=Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
			var copytext=txt;str.data=copytext;
			trans.setTransferData("text/unicode",str,copytext.length*2);
			var clipid=Components.interfaces.nsIClipboard;
			if(!clip)return false;
			clip.setData(trans,null,clipid.kGlobalClipboard);
	}
}

function copyCode(){
	var testCode=document.getElementById("txt").value;
	if(copy2Clipboard(testCode)!=false){
		alert("数据已经复制到粘贴板。  ");
	}
	else
		return ;
}
</script>
<!--  display part.-->
<body style="background:#CBE1FF">
<div id="toolbar" style="width:730px;margin:auto;" >
<p>请上传待查询经纬度的城市文件:</p>  
<p>格式要求：每行一个城市地址；.csv/.txt(建议批量查询城市数60，过多容易导致漏查或错误)</p>
<input type="file"  id="geofile" accept="text/plain">
<input type="button" οnclick="checkTPFile()" value="批次查询" >
<input type="button" οnclick="refreshData()" value="刷新" ><br>
</div>
<div id="result"></div>
<p></p>
<div id="lldata" value=""   style="margin:0 auto;              
                width: 730px; 
                height: 690px;         
                border: 1px solid gray;
                overflow:hidden;">

查询结果如下    :<input type="button" οnclick="copyCode()"  value="复制到CopyBoard">   
<input type="button" οnclick="copyResult()" value="Copy/Select">
<p id="lines"> </p>
<p id="statusLine"></p>
<h4>     地址		,经度Longtitude,纬度Latitude</h4>
<textarea id = "txt" name="txt" value="To be filled..."  rows="25" cols="85"></textarea>
</div>
<div id="map" style="display:none"></div>
</body>
</html>