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

发布于:2024-05-20 ⋅ 阅读:(201) ⋅ 点赞:(0)

目录

1 获取网络状态

  ☞ 获取当前网络状态

  ☞ 网络状态事件

2 获取地理定位

  ☞  获取一次当前位置

  ☞  实时获取当前位置

  ☞ 分析地理定位小案例


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>

效果

 


网站公告

今日签到

点亮在社区的每一天
去签到