h5学习笔记之地理信息与使用百度地图

最新推荐文章于 2021-12-15 09:05:59 发布

no的征程

最新推荐文章于 2021-12-15 09:05:59 发布

阅读量473

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/qq_39773416/article/details/100840021

版权

H5 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、首先要明白位置信息从何而来，以下就是
IP地址
GPS全球定位系统
Wi-Fi无线网络
基站
二、获取地理信息的方法 navigator.geolocation
1、单次定位请求：getCurrentPosition(请求成功,请求失败,数据收集方式)
2、多次定位请求 : watchPosition(请求成功,请求失败,数据收集方式) 移动设备有用，位置改变才会触发，特有属性： frequency 更新的频率
a、请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
请求的时间: new Date(position.timestamp)
b、请求失败函数
失败编号：code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息，但失败了
3 : 设置了timeout值，获取位置超时了
c、数据收集 : json的形式
enableHighAcuracy : 更精确的查找，默认false
timeout : 获取位置允许最长时间，默认infinity
maximumAge : 位置可以缓存的最大时间，默认0
1、单次定位请求：getCurrentPosition(请求成功,请求失败,数据收集方式)
如：

	<input type="button" value="请求" id="btn">
	<div id="div"></div>
	<script>
		var btn = document.getElementById("btn");
		var div = document.getElementById("div");
		btn.onclick = function(){
			navigator.geolocation.getCurrentPosition(                               //单次定位请求
			function(position){  //获取成功后得到的参数
				div.innerHTML += "经度:"+ position.coords.longitude + "\n";
				div.innerHTML += "纬度:"+ position.coords.latitude + "\n";
				div.innerHTML += "准确度:"+ position.coords.accuracy + "\n";
				div.innerHTML += "海拔准确度 :"+ position.coords.altitudeAcuracy + "\n";
				div.innerHTML += "行进方向:"+ position.coords.heading + "\n";
				div.innerHTML += "地面速度:"+ position.coords.speed + "\n";
				div.innerHTML += "请求的时间:"+ new Date(position.timestamp);	
			},function(err){
				alert(err.code);     //获取失败后得到的参数
			},{
				enableHighAcuracy : true,
				timeout : 2000,    //超过时候则获取失败
				maximumAge : 5000  //位置可以缓存的最大时间
			});
		    }

2、多次定位请求 : watchPosition(请求成功,请求失败,数据收集方式) 移动设备有用，位置改变才会触发

					var btn = document.getElementById("btn");
					var div = document.getElementById("div");
					var time = null;
					btn.onclick = function(){
						time = navigator.geolocation.watchPosition(function(position){        //多次定位请求方式
							div.innerHTML += "经度:"+ position.coords.longitude + "\n";
							div.innerHTML += "纬度:"+ position.coords.latitude + "\n";
							div.innerHTML += "准确度:"+ position.coords.accuracy + "\n";
							div.innerHTML += "海拔准确度 :"+ position.coords.altitudeAcuracy + "\n";
							div.innerHTML += "行进方向:"+ position.coords.heading + "\n";
							div.innerHTML += "地面速度:"+ position.coords.speed + "\n";
							div.innerHTML += "请求的时间:"+ new Date(position.timestamp);
							
						},function(err){
							alert(err.code);
						},{
							enableHighAcuracy : true,
							timeout : 5000,
							maximumAge : 5000,
							frequency : 1000      //特有属性，每隔多长时间获取一次
						});
					}				
		**三、使用百度地图**
					下面是利用百度地图的开发模式的代码，通过经纬度设置位置展开地图
		
						<!doctype html><!--声明当前文档为html文档-->
		<html lang="en"><!--语言为英语-->
			<head><!--头部-->
				<meta charset="UTF-8"><!--字符编码：utf-8国际编码  gb2312中文编码-->
				<meta name="Keywords" content="关键词">
				<meta name="Description" content="描述">
				<title>Document</title>
				<style>/*css样式表的衣柜*/
				#div1{
					width:400px;height:400px;border:1px solid red;
				}
				.anchorBL{
					display:none;
				}
				</style>
				<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=EEcbHuCX7BYY4iBQex4fjLtiEnAXCklO"></script>
			</head>
			<body><!--身体-->
				<div id="div1"></div>
				<script>
				var y,x;
					navigator.geolocation.getCurrentPosition(function(position){
						y = position.coords.longitude;
						x = position.coords.latitude
					});
					var pt = new BMap.Point(113.741829,23.04009)
					var map = new BMap.Map("div1");    // 创建Map实例
					map.centerAndZoom(pt, 11);  // 初始化地图,设置中心点坐标和地图级别
					//map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
					//map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
					map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
					var marker = new BMap.Marker(pt);  // 创建标注
					map.addOverlay(marker);              // 将标注添加到地图中
					map.centerAndZoom(pt, 15);
					var opts = {
						  width : 200,     // 信息窗口宽度
						  height: 100,     // 信息窗口高度
						  title : "广科" , // 信息窗口标题
						 //enableMessage:true,//设置允许信息窗发送短息
						  //message:"欢迎同学们来到潭州教育！~"
						}
					var infoWindow = new BMap.InfoWindow("地址：广科", opts);  // 创建信息窗口对象
					//map.openInfoWindow(infoWindow,pt); //开启信息窗口
					marker.addEventListener("click", function(){          
						map.openInfoWindow(infoWindow,pt); //开启信息窗口
					});
				</script>
			</body>
		</html>

no的征程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5学习笔记之地理信息与使用百度地图

一、首先要明白位置信息从何而来，以下就是IP地址GPS全球定位系统Wi-Fi无线网络基站二、获取地理信息的方法 navigator.geolocation1、单次定位请求：getCurrentPosition(请求成功,请求失败,数据收集方式)2、多次定位请求 : watchPosition(请求成功,请求失败,数据收集方式) 移动设备有用，位置改变才会触发，特有属性： ...
复制链接

扫一扫