html5 geolocation

最新推荐文章于 2022-11-22 09:52:17 发布
最新推荐文章于 2022-11-22 09:52:17 发布
阅读量933 收藏
点赞数
分类专栏： html5-web 文章标签： html5 distance function browser stylesheet header
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jianguo_liao19840726/article/details/7655731
版权 



<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" >
  <title>Geolocation</title>
  <link rel="stylesheet" href="geo-html5.css" >
</head>

<body οnlοad="loadDemo()">

  <header>
    <h1>Geolocation Demo</h1>
    <h4>Live Race Data!</h4>
  </header>

  <div id="container">
  
  <section>
    <article>
      <header>
        <h1>Your Location</h1>
      </header>

        <p class="info" id="status">Geolocation is not supported in your browser.</p>
      
      <div class="geostatus">
        <p id="latitude">Latitude: </p>
        <p id="longitude">Longitude: </p>
        <p id="accuracy">Accuracy: </p>
        <p id="timestamp">Timestamp: </p>
      </div>
      
    </article>
  </section>
     
  <footer>
    <h2>Powered by HTML5</h2>
  </footer>
  
  </div>
   
  <script>
  
    function loadDemo() {
	  
	  if(navigator.geolocation) {
        document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
        navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError,
                                                {timeout:10000});
      }
	}

    function updateLocation(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
	  var accuracy = position.coords.accuracy;
 	  var timestamp = position.timestamp;

      if (!latitude || !longitude) {
            document.getElementById("status").innerHTML = 
			  "HTML5 Geolocation is supported in your browser, but your location is currently not available.";
        return;
    }
      document.getElementById("latitude").innerHTML = "Latitude: " + latitude;
      document.getElementById("longitude").innerHTML = "Longitude: " +  longitude;
      document.getElementById("accuracy").innerHTML = "Accuracy: " + accuracy + " meters";
      document.getElementById("timestamp").innerHTML = "Timestamp: " + timestamp;
    }

    function handleLocationError(error) {
	  
	  document.getElementById("status").style.background = "papayaWhip";	  	
      switch(error.code)
      {
      case 0:
        updateStatus("There was an error while retrieving your location. Additional details: " + error.message);
        break;
      case 1:
        updateStatus("The user opted not to share his or her location.");
        break;
      case 2:
        updateStatus("The browser was unable to determine your location. Additional details: " + error.message);
        break;
      case 3:
        updateStatus("The browser timed out before retrieving the location.");
        break;
      }
    }
	
	function updateStatus(message) {
      document.getElementById("status").innerHTML = "<strong>Error</strong>: " + message;
    }
	
  </script>

</body>

</html>


<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" >
  <title>Geolocation</title>
  <link rel="stylesheet" href="geo-html5.css" >
</head>

<body οnlοad="loadDemo()">

  <header>
    <h1>Odometer Demo</h1>
    <h4>Live Race Data!</h4>
  </header>

  <div id="container">
  
  <section>
    <article>
      <header>
        <h1>Your Location</h1>
      </header>
      
        <p class="info" id="status">Geolocation is not supported in your browser.</p>
      
      <div class="geostatus">
        <p id="latitude">Latitude: </p>
        <p id="longitude">Longitude: </p>
        <p id="accuracy">Accuracy: </p>
        <p id="timestamp">Timestamp: </p>
        <p id="currDist">Current distance traveled: </p>
        <p id="totalDist">Total distance traveled: </p>
      </div>
      
    </article>
  </section>

     
  <footer>
    <h2>Powered by HTML5, and your feet!</h2>
  </footer>
  
  </div>
   
  <script>
  
    var totalDistance = 0.0;
    var lastLat;
    var lastLong;

    Number.prototype.toRadians = function() {
      return this * Math.PI / 180;
    }

    function distance(latitude1, longitude1, latitude2, longitude2) {
      // R is the radius of the earth in kilometers
      var R = 6371;

      var deltaLatitude = (latitude2-latitude1).toRadians();
      var deltaLongitude = (longitude2-longitude1).toRadians();
      latitude1 = latitude1.toRadians(), latitude2 = latitude2.toRadians();

      var a = Math.sin(deltaLatitude/2) *
              Math.sin(deltaLatitude/2) +
              Math.cos(latitude1) *
              Math.cos(latitude2) *
              Math.sin(deltaLongitude/2) *
              Math.sin(deltaLongitude/2);

      var c = 2 * Math.atan2(Math.sqrt(a),
                             Math.sqrt(1-a));
      var d = R * c;
      return d;
    }

    function updateErrorStatus(message) {
      document.getElementById("status").style.background = "papayaWhip";	
      document.getElementById("status").innerHTML = "<strong>Error</strong>: " + message;
    }

    function updateStatus(message) {
      document.getElementById("status").style.background = "paleGreen";
      document.getElementById("status").innerHTML = message;
    }

    function loadDemo() {
  
    if(navigator.geolocation) {
        document.getElementById("status").innerHTML = "HTML5 Geolocation is supported in your browser.";
        navigator.geolocation.watchPosition(updateLocation, handleLocationError,
                                                {timeout:10000});
        // updateStatus("Requesting Geolocation data")
      }
	}

    function updateLocation(position) {
      var latitude = position.coords.latitude;
      var longitude = position.coords.longitude;
      var accuracy = position.coords.accuracy;
      var timestamp = position.timestamp;

      document.getElementById("latitude").innerHTML = "Latitude: " + latitude;
      document.getElementById("longitude").innerHTML = "Longitude: " +  longitude;
      document.getElementById("accuracy").innerHTML = "Accuracy: " + accuracy + " meters";
      document.getElementById("timestamp").innerHTML = "Timestamp: " + timestamp;

      // sanity test... don't calculate distance if accuracy
      // value too large
      if (accuracy >= 30000) {
        updateStatus("Need more accurate values to calculate distance.");
        return;
      }

      // calculate distance
      if ((lastLat != null) && (lastLong != null)) {
        var currentDistance = distance(latitude, longitude, lastLat, lastLong);

        document.getElementById("currDist").innerHTML = 
                 "Current distance traveled: " + currentDistance.toFixed(2) + " km";

        totalDistance += currentDistance;
        document.getElementById("totalDist").innerHTML = 
                 "Total distance traveled: " + currentDistance.toFixed(2) + " km";
        updateStatus("Location successfully updated.");

      }

      lastLat = latitude;
      lastLong = longitude;

    }

    function handleLocationError(error) {
      switch(error.code)
      {
      case 0:
        updateErrorStatus("There was an error while retrieving your location. Additional details: " + error.message);
        break;
      case 1:
        updateErrorStatus("The user opted not to share his or her location.");
        break;
      case 2:
        updateErrorStatus("The browser was unable to determine your location. Additional details: " + error.message);
        break;
      case 3:
        updateErrorStatus("The browser timed out before retrieving the location.");
        break;
      }
    }

  </script>

</body>

</html>







沈纵情
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 Geolocation API的正确使用方法
09-22
Geolocation是HTML5标准下的一个Web API,利用它可以获取设备的当前位置信息（坐标），本篇文章主要介绍了三个方法，非常具有实用价值，需要的朋友可以参考下
HTML5 Geolocation（地理定位）
蚩尤后裔-汪茂雄
12-23 2138
目录 HTML5 Geolocation getCurrentPosition() 方法 编码示例 获取位置信息 百度地图展示位置 使用方法 HTML5 Geolocation 1、HTML5 Geolocation（地理定位）用于定位用户的位置 2、鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息不可用。（所以通常是弹窗提示用户进行授权） 3、Internet E...
HTML5 地理位置定位
Have fun,Study hard,Be myself
05-17 969
HTML5 地理位置定位（HTML5 Geolocation）原理及应用 　　地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。 　　在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome
HTML5 学习06——Geolocation（地理定位）
weixin_30871905的博客
09-01 120
HTML5Geolocation（地理定位） HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 HTML5 - 使用地理定位 getCurrentPosition() 方法：来获得用户的位置 例：回用户位置的经度和纬度 <body> <p id="demo"&g...
Html5 Geolocation获取地理位置信息实例
09-27
主要介绍了Html5 Geolocation获取地理位置信息实例，具有一定的参考价值，有兴趣的同学可以了解一下。
HTML5 Geolocation.pdf
11-15
HTML5定位技术，用于手机应用，网页的定位技术，和地图结合的很好，应该适当些时髦的技术
使用HTML5 Geolocation实现一个距离追踪器
09-27
HTML5 Geolocation（地理定位）用于定位用户的位置，那么怎么实现一个距离追踪器呢？下面小编给大家带来了基于HTML5 Geolocation实现一个距离追踪器的实例代码，感兴趣的朋友一起看看吧
HTML5 geoLocation API
03-03
HTML5的地理定位功能演示
HTML5 Geolocation
iSky
06-03 654
在调用 HTML5 Geolocation API 函数前，需要确保浏览器支持此功能。当浏览器不支持时，可以提供一些替代文本，以提示用户升级浏览器或安装插件（如 Gears）来增强现有浏览器功能。清单 1 是浏览器支持性检查的一种途径。 清单 1. 检查浏览器支持性 function testSupport() { if (navigator.geolocation)
geolocation地理定位
04-14
geolocation地理定位
Geolocation定位你当前所在位置
03-28
NULL 博文链接：https://spring036765.iteye.com/blog/1264555
HTML5（五）Geolocation
gman344的博客
07-24 596
HTML5 Geolocation 定位用户的位置 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。 注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。 geography 地理； location 位置; Geo+location 地理位置； current 现在； getCurrentPosition() 方法 - 返回数据 T若成功，则 g...
HTML5 - 地理定位(Geolocation)
王佳斌
09-05 4598
前言 H5 Geolocation API 用于获得用户的地理位置，鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用。还有，对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。 浏览器支持情况：Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。 简单示例 必须使用 getCurrentPositi...
HTML5地理位置geoLocation
哈哈哈
02-28 429
HTML5地理位置geoLocation webapp和app中的LSB（Location Based Services，基于位置的服务)与O2O的结合越来越火爆，在移动页面的开发中往往需要加入地理定位等前端功能。以获取用户的精确位置，并提供个性化服务。在HTML5中，Geolocation为我们提供了实现这个功能的可能性。利用这个特性获取用户的经纬度信息，并使用百度或高度地图提供的A...
【HTML】HTML5的新特性Geolocation
归子莫的博客
03-10 1259
重构前端知识体系，你要一起吗？
HTML5 Geolocation（地理定位）简介
Free雅轩的博客
11-22 745
如果可用，则会返回其他下面的属性。watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。x.innerHTML="纬度: " + position.coords.latitude +x.innerHTML="纬度: " + position.coords.latitude +x.innerHTML="用户拒绝对获取地理位置的请求。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。x.innerHTML="位置信息是不可用的。
HTML5新特性之Geolocation
LiuHe
05-10 1690
在手持设备如此普遍的今天，位置信息对于应用程序来讲是极其重要的，打车应用可以根据用户的位置信息呼叫附近的车辆，团购软件可以根据当前的位置推荐附近的影院和美食，地图应用可以根据用户的位置快速规划到目的地的路线，可以说位置信息对于移动应用是不可或缺的。 为了顺应这个潮流，HTML5为我们提供了Geolocation库，有了它我们就能够在Web应用中轻而易举地实现上述这些功能。那么今天我就为大家介绍一下这个库的使用。
HTML5 Geolocation API 总结
薛小科的博客
05-23 1158
Geolocation（地理定位）是一个让人兴奋，并且浏览器广泛支持的 API。通过调用该 API，JavaScript 可以访问当前用户的位置信息，不过需要在浏览器中授权，会弹出一个确认框让你确认，如下： 通过使用 navigator.geolocation.getCurrentPosition() 方法来获取位置，该方法接收三个参数：成功回调函数，失败回调函数，可选参数。其中，成功回调函数会...
html5中获取当前位置
最新发布
06-07
你可以使用HTML5 Geolocation API来获取用户的当前位置。以下是一个简单的示例代码： ```javascript if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { alert(...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值