百度地图批量地址解析（地址转化经纬度）

最新推荐文章于 2024-08-05 20:04:15 发布

态度-责任

最新推荐文章于 2024-08-05 20:04:15 发布

阅读量9.6k

点赞数 3

分类专栏： js 文章标签：百度地图地址解析

本文链接：https://blog.csdn.net/u010544643/article/details/90025053

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

百度地图地址批量解析（地址转化经纬度）

以下是js脚本实现地址批量解析

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<title>批量地址</title>
	<style type="text/css">
		body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
		#l-map{height:300px;width:100%;}
		#r-result{width:100%; font-size:14px;line-height:20px;}
	</style>
</head>
<body>
	<div id="l-map"></div>
	<div id="r-result">
		<input type="button" value="批量地址解析" onclick="bdGEO()" />
		<div id="result"></div>
	</div>
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的百度地图密钥"></script>

<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("l-map");
	map.centerAndZoom(new BMap.Point(116.402831,39.914271), 13);
	map.enableScrollWheelZoom(true);
	var index = 0;
	var myGeo = new BMap.Geocoder();
	var adds = ["1,北京市海淀区上地",
				"2,北京市海淀区西二旗",
				"3,北京市海淀区五道口",
				"4,北京市海淀区回龙观",
				"5,北京市海淀区龙泽",
				"6,北京市海淀区知春路",
				"7,北京市朝阳区豆各庄"];
	function bdGEO(){
		var add = adds[index];
		geocodeSearch(add);
		index++;
	}
	function geocodeSearch(add){
		if(index < adds.length){
			setTimeout(window.bdGEO,100);
		} 
		myGeo.getPoint(add, function(point){
			if (point) {
				//document.getElementById("result").innerHTML +=  index + "、" + add + ":" + point.lng + "," + point.lat + "</br>";
				document.getElementById("result").innerHTML += "longitude = " + point.lng + ", latitude =" + point.lat + "</br>";
				var address = new BMap.Point(point.lng, point.lat);
				addMarker(address,new BMap.Label(index+":"+add,{offset:new BMap.Size(20,-10)}));
			}
		}, "北京市");
	}
	// 编写自定义函数,创建标注
	function addMarker(point,label){
		var marker = new BMap.Marker(point);
		map.addOverlay(marker);
		marker.setLabel(label);
	}

</script>