这是在浏览器中的效果：

控制台打印出来的就是经度纬度的值

代码如下：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

    <title>浏览器精确定位</title>

      <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <style>

        html,body,#container{

            height:100%;

        }

        .info{

            width:26rem;

        }

    </style>

<body>

<div id='container'></div>

<div class="info">

    <h4 id='status'></h4><hr>

    <p id='result'></p><hr>

    <p >由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS。</p>

</div>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.12&key=bc6ee21ecdcad5390e66cd92206a5f2c"></script>

<script type="text/javascript" src="https://www.w3cways.com/demo/vconsole/vconsole.min.js?v=2.2.0"></script>

<script type="text/javascript">

    var map = new AMap.Map('container', {

        resizeEnable: true

    });

    AMap.plugin('AMap.Geolocation', function() {

        var geolocation = new AMap.Geolocation({

            enableHighAccuracy: true,//是否使用高精度定位，默认:true

            timeout: 10000,          //超过10秒后停止定位，默认：5s

            buttonPosition:'RB',    //定位按钮的停靠位置

            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)

            zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点

        });

        map.addControl(geolocation);

        geolocation.getCurrentPosition(function(status,result){

            if(status=='complete'){

                onComplete(result)

            }else{

                onError(result)

            }

        });

    });

    //解析定位结果

    function onComplete(data) {

console.log(data.position.lng);

console.log(data.position.lat);

        document.getElementById('status').innerHTML='定位成功'

        var str = [];

        str.push('定位结果：' + data.position);

        str.push('定位类别：' + data.location_type);

        if(data.accuracy){

             str.push('精度：' + data.accuracy + ' 米');

        }//如为IP精确定位结果则没有精度信息

        str.push('是否经过偏移：' + (data.isConverted ? '是' : '否'));

        document.getElementById('result').innerHTML = str.join('<br>');

    }

    //解析定位错误信息

    function onError(data) {

        document.getElementById('status').innerHTML='定位失败'

        document.getElementById('result').innerHTML = '失败原因排查信息:'+data.message;

    }

</script>

</body>

</html>

代码可以直接使用

高德JSAPI获取当前所在位置的经度纬度的更多相关文章

  1. ionic 获取手机所在位置

    之前项目中需要使用到定位功能,前边的文章提到的坐标位置是有问题的,是国际坐标,国内的环境使用google地图会出现问题,所以需要使用国内的地图进行坐标解析,因为国内和国外的坐标体系不一致,需要通过转换 ...

  2. js通过高德地图获取当前位置的经度纬度

    效果图如下: 已经获取到了经度纬度了 代码如下: <!doctype html> <html> <head> <meta charset="utf- ...

  3. IOS 正则表达式匹配文本中URL位置并获取URL所在位置(解决连接中文问题)

    需求很简单,是从一段文本中匹配出其中的超链接.基本的做法就是用正则表达式去匹配.但是有这样一个问题. 网上大部分的识别URL的正则表达式url末尾有空格的情况下可以正确识别.比如这样的情况. 我是一段 ...

  4. 在微信小程序中将获取到的经纬度（经度纬度）转地址（地名）

    var QQMapWX = require('qqmap-wx-jssdk') var qqmapsdk = new QQMapWX({ key: '填写你的key' // 必填 }) wx.getL ...

  5. android百度地图开发之自动定位所在位置与固定位置进行驾车，步行，公交路线搜索

    最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车.公交.步行三种路径的搜索(公交路径运行没效果,待学习中),后来又 学了定位功能,能够获取到自己所在位置的经纬度,但当将两 ...

  6. android EditText插入字符串到光标所在位置

    EditText mTextInput=(EditText)findViewById(R.id.input);//EditText对象 int index = mTextInput.getSelect ...

  7. H5高德地图获取当前位置

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. js调用高德API获取所在当前城市

    可以在js代码中直接调用API接口,获取所处当前城市信息,代码如下: <script type="text/javascript"> function getCurre ...

  9. vba中获取当前sheet页的名称，当前单元格所在位置

    fname = ActiveSheet.Name-------获取当前sheet页的名称        Sname = "" & fname & "&qu ...

随机推荐

  1. MongoDB系列：四、spring整合mongodb，带用户验证

    在前面的两篇博客 MongoDB常用操作练习.springboot整合mongoDB的简单demo中,我们基本上熟悉了mongodb,也把它与spring boot进行了整合并且简单使用.在本篇博客中 ...

  2. 利用控制台承载SignalR作为服务端、及第三方推送信息

    一 首先建立一个控制台需要引用一些组件 特别要注意引用Microsoft.Owin.Host.HttpListener别忘了这个组件,不引用他可能程序正常运行不会报错,但服务器一直开启失败(我之前就是 ...

  3. ftp服务器安装与配置

    ftp服务器安装与配置 1. ftp服务端的安装 1 如果之前配置过ftp服务器的还是之后配置的服务器,无法启动服务,那么基本是配置出现了错误,那么可先完全卸载后再进行安装.如果无法定位多半是镜像源的 ...

  4. [转载] .NET 中可以有类似 JVM 的幻像引用吗？

    近日发现一篇不错的文章,文中列举了一些 GC 场景,探讨了 在 .NET 中是需要实现像 JVM 的中的幻像引用.有人质疑其不切实际,也有像 Ayende 大神一言不合就自己做了个 demo. Do ...

  5. vue关于为空使用默认值

    参考地址:https://segmentfault.com/q/1010000009898107/a-1020000009898747 实现效果如下:

  6. MySql数据库字段排序规则不一致产生的一个问题

    最近项目向MySql迁移,迁移完毕后,在获取用户权限时产生了一个异常,跟踪进去获取执行的语句如下, SELECT PermissionId FROM spysxtPermission WHERE (R ...

  7. 洛谷P3327 约数个数和 结论+莫比乌斯反演

    原题 就是让你求\(\sum\limits_{i=1}\sum\limits_{j=1}d(ij)\)(其中\(d(x)\)表示\(x\)的因数个数) 首先有引理(然而并没有证明): \(d(ij)= ...

  8. Python爬虫之三

    1)使用Scrapy,什么叫做Scrapy Scrapy,Python开发的一个快速.高层次的屏幕抓取和web抓取框架,用于抓取web站点并从页面中提取结构化的数据.Scrapy用途广泛,可以用于数据 ...

  9. 20175221《Java程序设计》第9周学习总结

    20175221   <Java程序设计>第9周学习总结 教材学习内容总结 第十一章主要内容有: MySQL数据库管理系统 下载mysql-8.0.16-winx64 启动MySQL数据库 ...

  10. 安装nova后解决登录没账号问题

    找到laravel安装目录执行php artisan nova:user