利用html5新增geolocation对象加百度地图API获取用户详细地址

最新推荐文章于 2023-06-15 14:36:39 发布

代码一天不写我浑森蓝廋

最新推荐文章于 2023-06-15 14:36:39 发布

阅读量1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhang197093/article/details/50016697

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

废话不多说，直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			(function getAddr() {
			   var geolocation = navigator.geolocation;
			   geolocation.getCurrentPosition(
			   function(position){
					  var coords = [];<span style="font-family: Arial, Helvetica, sans-serif;">//获取用户经纬度</span>

					  var latitude = position.coords.latitude;
					  var longitude = position.coords.longitude;
					  coords.push(latitude);
					  coords.push(longitude);
					  coords = coords.join();
						if(coords != ''){
							//调用百度地图api把经纬度转换成具体地址，由于ajax的同源限制，此处采用jsonp的方式，另外写了一个showAddr
							var api = 'http://api.map.baidu.com/geocoder/v2/?ak=qxVuv98bZnwXqMU3fmmxXSoF&callback=showAddr&location=' + coords + '&output=json&pois=0';
							var script = $('<script/>').appendTo($('body'));
							script.attr('src' , api);
						}
			   }, function(err){
					alert(err.message + ' : ' + err.code);
			   });
			})();

			//百度地图API回调的函数
			function showAddr(obj){
				if(obj.status == 0){
					var result = obj.result;
					var addr = {
						province : result.addressComponent.province,
						city : result.addressComponent.city,
						district : result.addressComponent.district,
						formatted_address : result.formatted_address
					};
					
					alert('province' + ' : ' + addr.province + "\n" + 'city' + ' : ' + addr.city + "\n" + 'district' + ' : ' +addr.district + "\n" + 'formatted_address' + ' : ' + addr.formatted_address);

				}
			}
		
		</script>
	</head>
	
	<body>
	</body>
	
</html>

注意，此代码需要在移动设备上才可正常运行，可以传到服务器上测试，首次运行会向用户请求权限

geolocation的使用介绍：

http://wiki.jikexueyuan.com/project/html5/geolocation.html

百度API的官方手册：

http://developer.baidu.com/map/index.php?title=webapi/guide/webservice-geocoding