h5-25-地理定位配合百度地图 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html,body {
				height: 100%;
			}
		
			#mapDiv {
				width: 100%;
				height: 100%;
			}			
		</style>
	</head>
	<body>
		<!--显示地区的div-->
		<div id="mapDiv">			
		</div>
		
		<script src="http://api.map.baidu.com/api?v=2.0&ak=Q6aiD950lCsEWDWblF8T5BzQjxeUylCj"></script>
		<script>
			/**
			 * 地理定位
			 */
			function getLocation() {
				
				//判断浏览器是否支持html5地理定位
				if (navigator.geolocation) {
					
					//定位方法，参数1：定位成功回调函数，参数2：定位失败回调函数，参数3：具体定位设置
					navigator.geolocation.getCurrentPosition(showMap,handlerError,{
						enableHighAccuracy:true, //是否高精度定位
						maximumAge:1000  //每隔多少毫秒重新获得一次位置
					});
					
				} else {
					alert('当前浏览器不支持html5的地理定位');
				}
				
			}
			
			/**
			 * 定位成功的回调函数，参数就是坐标对象
			 */
			function showMap(loc) {
				
				var longitude = loc.coords.longitude;//经度
				var latitude = loc.coords.latitude;//纬度
				
				alert('定位成功,当前经纬度：' + longitude + ',' + latitude);	
				
				//写死的经纬度
//				var longitude = 121.51155629576095;
//				var latitude = 38.86043635958201;
				
				//调用百度地图的API
				var map = new BMap.Map('mapDiv'); //创建地图对象
				var point = new BMap.Point(longitude,latitude);//坐标点对象
				
				var convertor = new BMap.Convertor(); //转换坐标类的对象
				var pointArr = []; //坐标数组
				pointArr.push(point); //加入一个坐标对象（可以加入多个坐标对象）
				convertor.translate(pointArr,1,5,translateCallback);//转换坐标			
				
				//添加地图类型控件，默认在地图右上方
				map.addControl(new BMap.MapTypeControl());
				//地图平移缩放控件，PC端默认地图左上方，移动端提供缩放控件，默认在地图右下方
				map.addControl(new BMap.NavigationControl());
				//比例尺控件，默认在地图左下方，显示地图的比例关系
				map.addControl(new BMap.ScaleControl());
				//缩略地图控件，默认在地图右下方，是一个可折叠的缩略地图
				map.addControl(new BMap.OverviewMapControl());
				//定位控件，针对于移动端，默认在地图左下方
				map.addControl(new BMap.GeolocationControl());
				//开启滚轮缩放
				map.enableScrollWheelZoom(true);				
			
				
				//转换完毕的回调函数，data就是转换后的数据
				function translateCallback(data) {
					
					if (data.status == 0) { //0为转换成功
						var marker = new BMap.Marker(data.points[0]); //创建标记点
						map.addOverlay(marker);//在地图上添加标记点
						var label = new BMap.Label('纠正之后的GPS坐标',{offset:new BMap.Size(20,-20)}); //创建文字标签
						marker.setLabel(label); //添加标记的文字标签						
						map.centerAndZoom(data.points[0],15) ;//设置坐标中心点和缩放级别
					}
					
				}
			}
			
			/**
			 * 定位失败的回调函数，参数就是错误码对象
			 */
			function handlerError(err) {
				
				if (err.code == 1) {
					alert('位置服务被拒绝，请开启');
				} else if (err.code == 2) {
					alert('无法获得用户位置');
				} else if (err.code == 3) {
					alert('获取信息超时');
				} else if (err.code == 4) {
					alert('未知错误无法定位');
				}				
			}
			
			//调用定位
			getLocation();
		</script>
	</body>
</html>

　　

posted @ 2017-08-03 10:31  奋斗的少年WH  阅读(163)  评论(0)    收藏  举报