效果图如下：

已经获取到了经度纬度了

代码如下：

<!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://cache.amap.com/lbs/static/main1119.css" />

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

        <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

        <body>

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

            <div id="tip"></div>

            <script type="text/javascript">

                /***************************************

                    由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。

                    ***************************************/

                var map, geolocation;

                //加载地图，调用浏览器定位服务

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

                    resizeEnable: true

                });

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

                    geolocation = new AMap.Geolocation({

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

                        timeout: 10000, //超过10秒后停止定位，默认：无穷大

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

                        zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

                        buttonPosition: 'RB'

                    });

document.getElementById('tip').innerHTML="定位中，请勿操作，否则会定位失败";

document.getElementById("tip").style.color="red";

                    map.addControl(geolocation);

                    geolocation.getCurrentPosition();

                    AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息

                    AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息

                });

                //解析定位结果

                function onComplete(data) {

                    var str = [];

console.log(data.position.getLat());

console.log(data.position.getLng());

                    str.push(data.position.getLat());

                    str.push(data.position.getLng());

                    //document.getElementById('tip').innerHTML = str;

document.getElementById('tip').innerHTML="定位成功";

document.getElementById("tip").style.color="#15A3FA";

setTimeout(tishi,3000);

                }

                //解析定位错误信息

                function onError(data) {

                    document.getElementById('tip').innerHTML = '定位失败请刷新再试';

                }

function tishi(){

  document.getElementById("tip").style.visibility="hidden";

}

            </script>

        </body>

</html>

js通过高德地图获取当前位置的经度纬度的更多相关文章

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

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

  2. H5 高德地图获取当前位置信息

    返回结果:jsonp_393330_({"status":"1","info":"OK","infocode& ...

  3. js调用高德地图API获取地理信息进行定位

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=(需要自 ...

  4. iOS的高德地图标注特定位置

    在开发时有时候遇到项目里面需要展示公司的位置,这时如果导入百度地图什么的就太浪费资源,而且还占内存 这时只要调用自动高德地图的就行了 自己写一个控制器,导入框架 现在导入系统框架只要多打次就能出来了, ...

  5. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  6. 高德JSAPI获取当前所在位置的经度纬度

    这是在浏览器中的效果: 控制台打印出来的就是经度纬度的值 代码如下: <!doctype html> <html> <head> <meta charset= ...

  7. vue.js 使用高德地图

    1.获取key值 注册成为高德开发者需要分三步: 第一步,注册高德开发者: 第二步,去控制台创建应用: 第三步,获取Key 2.修改配置文件  webpack.base.conf.js externa ...

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

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

  9. js/vue 高德地图绘制驾车路线图

    地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...

随机推荐

  1. Git—分支管理

    Git—分支管理 分支学习:branch称为分支,默认仅有一个名为master的分支.一般开发新功能流程为:开发新功能时会在分支dev上进行,开发完毕后再合并到master分支. branch相关常用 ...

  2. Java的selenium代码随笔（5）

    //以下七种方法主要用于生成年.月.日.小时.分钟和秒的信息,用于生成保存截图的文件目录名和文件名/** 格式化输出日期* * @return 返回字符型日期*/public static Strin ...

  3. linux 运维工程师发展路线

    linux运维发展常见的就是下面两条路线:第一条:运维应用-->系统架构-->运维开发-->系统开发第二条:运维应用-->应用dba-->架构dba-->开发DBA ...

  4. ReSharper 2017破解详细方法：

    VS里面,打开ReSharper的注册窗口:ReSharper ——> Help ——> License Information... Use License Server,右侧加号,点击 ...

  5. Python datetime模块的介绍

    datetime模块常用的主要有下面这四个类:(要清楚import datetime : 导入的是datetime这个包,包里有各种类) 1. datetime.date   用于表示年月日构成的日期 ...

  6. Python——装饰器

    1.装饰器形成的过程 2.装饰器的作用 3.原则:开放封闭原则 开放:对扩展是开放的 封闭:对修改是封闭的 4.装饰器的固定模式 def func(): time.sleep(0.01) ') def ...

  7. layui 日期初化一个月前

    lay('.test-item').each(function(){ var d = new Date(); laydate.render({ elem: this ,max: 0 ,value: d ...

  8. python中socket、进程、线程、协程、池的创建方式和应用场景

    进程 场景 利用多核.高计算型的程序.启动数量有限 进程是计算机中最小的资源分配单位 进程和线程是包含关系 每个进程中都至少有一条线程 可以利用多核,数据隔离 创建 销毁 切换 时间开销都比较大 随着 ...

  9. Hdoj 1517.A Multiplication Game 题解

    Problem Description Stan and Ollie play the game of multiplication by multiplying an integer p by on ...

  10. Java【第五篇】基本语法之--数组

    数组概述 数组是多个相同类型数据的组合,实现对这些数据的统一管理数组属引用类型,数组型数据是对象(Object),数组中的每个元素相当于该对象的成员变量数组中的元素可以是任何数据类型,包括基本类型和引 ...