【html5】07-获取网络状态和获取地理定位

最新推荐文章于 2024-06-12 09:31:39 发布

Mikuc

最新推荐文章于 2024-06-12 09:31:39 发布

阅读量268

点赞数 5

分类专栏： HTML5 文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_68467925/article/details/139048719

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 获取网络状态

☞ 获取当前网络状态

window.navigator.onLine 返回一个布尔值

例：
<body>
	
	  <script type="text/javascript">
	  		
	  	  //获取当前网络状态
	  	  var state=window.navigator.onLine;

	  	  if(state) {

	  	  	 alert("您好，当前处于联网状态");
	  	  	 
	  	  }else {
	  	  	 alert("当前处于断网状态");
	  	  }

	  </script>
</body>
效果：只要目前处于联网状态，就会显示“您好，当前处于联网状态”

☞ 网络状态事件

1. window.ononline

2. window.onoffline

例：
<body>
	
	 <script type="text/javascript">

	 	   //当联网的时候触发该事件
	 	   window.ononline=function () {
	 	   	
	 	   	   alert("在线");
	 	   }

	 	   //当断网的时候触发该事件

	 	   window.onoffline=function() {
	 	   	
	 	   	   alert("断网");
	 	   }
	 </script>
</body>
效果：在断开网络的时候显示断网；在联网的时候显示在线

2 获取地理定位

```javascript

☞ 获取一次当前位置

window.navigator.geolocation.getCurrentPosition(success,error);

1. coords.latitude 维度

2. coords.longitude 经度

<body>
	
	<script type="text/javascript">
		
		  window.navigator.geolocation.getCurrentPosition(success,error);

		  //成功获取地理位置时候的回调函数
		  function success (msg,position) {

		  	 console.log(msg,position);
		  }

		  //地理位置获取失败时候的回调函数
		  function error (msg) {
		  	 console.log(msg);

		  }

	</script>
</body>

效果：

允许

可以看到经度、维度

阻止

☞ 实时获取当前位置

window.navigator.geolocation.watchPosition(success,error);

<body>
	
	 <script type="text/javascript">

	 	 window.navigator.geolocation.watchPosition(success,error);

	 	 function success (msg,pt) {
	 	 	console.log(msg,pt);
	 	 }

	 	 function error (msg) {
	 	 	console.log(msg);
	 	 }
	 </script>
</body>

☞ 分析地理定位小案例

例：结合百度地图，显示自己所在的地理位置，并标记

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>百度地图</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=rFwb7Ow6y08zThgDXpGoovvtNIKkQIQO"></script>
	<style type="text/css">
		body, html,#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin:0;
			font-family:"微软雅黑";
	    }
	</style>
</head>
<body>
	
   <div id="allmap"></div>

   <script type="text/javascript">
   	
   	   window.navigator.geolocation.getCurrentPosition(suc,err);

   	   function suc(position){

   	   		var wd=position.coords.latitude;
   	   		var jd=position.coords.longitude;

   	   	    // 百度地图API功能
			var map = new BMap.Map("allmap");
			var point = new BMap.Point(jd,wd);
			map.centerAndZoom(point, 15);
			
			//创建小狐狸
			var pt = point;
			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker2);   
   	   }

   	   function err(meg){

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

效果