通过百度地图API获取自己当前所在的地理位置

最新推荐文章于 2024-05-10 20:36:32 发布

如梦灬初醒

最新推荐文章于 2024-05-10 20:36:32 发布

阅读量8.6k

点赞数 4

本文链接：https://blog.csdn.net/TXW6666/article/details/105468465

版权

首先你要在百度地图的开发平台.申请成为百度开发者并获取一个自己的密钥（申请AK.）

百度的开发指南中有很详细的说明

下面这段能实现自己当前所造位置并且输出当前所在的省份以及城市地区

添加js文件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

创建地图显示的盒子并设置样式

	<style>
			#container {
				height: 100%
			}
	</style>
	
	<div id="container"></div>

通过 BMap类创建初始地图

链接: BMap类 .

	var map = new BMap.Map("container"); // 创建Map实例
	var point = new BMap.Point(116.331398, 39.897445);
	map.centerAndZoom(point, 12); //初始化地图,用一经纬度坐标设置地图中心点

通过Geolocation获取当前经纬度

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
	if(this.getStatus() == BMAP_STATUS_SUCCESS){
		var mk = new BMap.Marker(r.point);
		map.addOverlay(mk);
		map.panTo(r.point);
		alert('您的位置：'+r.point.lng+','+r.point.lat);
	}
	else {
		alert('failed'+this.getStatus());
	}        
});

通过坐标获取当前所在区域使用Geocoder创建一个地址解析器的实例

用于获取用户的地址解析。

		var geocoder= new BMap.Geocoder();
		geocoder.getLocation(point, function(addComp ) {
			var addComp = addComp.addressComponents;
			var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
			setTimeout(function(){
				alert("您当前所在位置是：" + address)
			}, 1000);
		});

并在地图上定位当前区域

var ggPoint = new BMap.Point(r.point.lat, r.point.lng); //转化坐标
var map = new BMap.Map("container");
map.centerAndZoom(ggPoint, 15);
console.log(ggPoint);
//添加marker
var markergg = new BMap.Marker(ggPoint);
map.addOverlay(markergg); //添加GPS marker
var labelgg = new BMap.Label("", {offset: new BMap.Size(20, -10)}); //显示当前区域
markergg.setLabel(labelgg); //添加GPS label
console.log(markergg);
//添加控件
map.addControl(new BMap.NavigationControl()); //平移缩放控件 
map.addControl(new BMap.ScaleControl()); //比例尺
map.addControl(new BMap.OverviewMapControl()); //缩略地图  
map.addControl(new BMap.MapTypeControl()); //地图类型
var point = new BMap.Point(markergg.point.lat, markergg.point.lng); //根据经纬度设置中心点坐标  
map.centerAndZoom(point, 15);

完整代码

	<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>地理位置</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
		<style>
			#container {
				height: 100%
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<script type="text/javascript">
			var map = new BMap.Map("container"); // 创建Map实例
			var point = new BMap.Point(116.331398, 39.897445);
			map.centerAndZoom(point, 12); //初始化地图,用一经纬度坐标设置地图中心点

			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
						if(this.getStatus() == BMAP_STATUS_SUCCESS) {
							getAddress(r.point)
							var ggPoint = new BMap.Point(r.point.lat, r.point.lng); //转化坐标
							var map = new BMap.Map("container");
							map.centerAndZoom(ggPoint, 15);
							console.log(ggPoint);
							//添加marker
							var markergg = new BMap.Marker(ggPoint);
							map.addOverlay(markergg); //添加GPS marker
							var labelgg = new BMap.Label("", {
								offset: new BMap.Size(20, -10)
							}); //显示当前区域
							markergg.setLabel(labelgg); //添加GPS label
							console.log(markergg);
							//添加控件
							map.addControl(new BMap.NavigationControl()); //平移缩放控件 
							map.addControl(new BMap.ScaleControl()); //比例尺
							map.addControl(new BMap.OverviewMapControl()); //缩略地图  
							map.addControl(new BMap.MapTypeControl()); //地图类型
							var point = new BMap.Point(markergg.point.lat, markergg.point.lng); //根据经纬度设置中心点坐标  
							map.centerAndZoom(point, 15);
							//获取地址信息，设置地址label
							function getAddress(point) {
								var geocoder= new BMap.Geocoder();
								geocoder.getLocation(point, function(addComp ) {
									var addComp = addComp.addressComponents;
									var address = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber; //获取地址
									 setTimeout(function(){
										alert("您当前所在位置是：" + address)
							    	}, 1000);
								});
							}
						}
					})
		</script>
	</body>
</html>

更多功能请参考：百度开发平台链接

如梦灬初醒

关注

4
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
通过百度地图API获取自己当前所在的地理位置

首先你要在百度地图的开发平台.申请成为百度开发者并获取一个自己的密钥（申请AK.）百度的开发指南中有很详细的说明下面这段能实现自己当前所造位置并且输出当前所在的省份以及城市地区添加js文件<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script&...
复制链接

扫一扫