H5 获取地理位置

Posted 贝尔塔猫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 获取地理位置相关的知识,希望对你有一定的参考价值。

只能通过手机浏览器访问,并且用户必须允许访问才可以生效

<!doctype html>
<html>
  <head>
        <title>Mobile Cookbook</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
    </header>
        <div id="main">
            <div id="someElm">
            </div>
        </div>
    <footer>
    </footer>
    <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
    function getLocation() {
    navigator.geolocation.getCurrentPosition(showInfo);
  }
  function showInfo(position) {
      console.log(position);
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    var accuracy = position.coords.accuracy;
    $(\'#someElm\').html(\'latitude: \'+latitude+\'<br />longitude: \'+longitude+\'<br />accuracy: \'+accuracy);
  }
  getLocation();
    </script>
    </body>
</html>

 

以上是关于H5 获取地理位置的主要内容,如果未能解决你的问题,请参考以下文章

获取定位,苹果IOS10以上不支持h5的geolocation获取不到地理位置信息解决办法

获取定位,苹果IOS10以上不支持h5的geolocation获取不到地理位置信息解决办法

在选项卡式应用程序中的何处放置位置代码?

H5微信 获取用户当前位置信息

H5 获取地理位置

H5获取地埋位置