<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

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

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=9f831272996d8fb9c2765393725e3f96"></script>

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

    <body>

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

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

        <script type="text/javascript">

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

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

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

        var map, geolocation;

        map = new AMap.Map('container');

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

            geolocation = new AMap.Geolocation({

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

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

                maximumAge: 0, //定位结果缓存0毫秒，默认：0

                convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true

                showButton: true, //显示定位按钮，默认：true

                buttonPosition: 'LB', //定位按钮停靠位置，默认：'LB'，左下角

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

                showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true

                showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true

                panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true

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

            });

            map.addControl(geolocation);

            geolocation.getCurrentPosition();

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

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

        });

        var myplace = ''; //我的位置

        var mycity = ''; //我所在的城市

        //解析定位结果

        function onComplete(data) {

            var str = ['定位成功'];

            str.push('经度：' + data.position.getLng());

            str.push('纬度：' + data.position.getLat());

            if (data.accuracy) {

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

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

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

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

            // parent.loca(data);

            myplace = data.formattedAddress; //我的位置

            mycity = data.addressComponent.city; //我所在的城市

            console.log('str',data.position.getLng(),data.position.getLat());

            console.log("我所在的地点为 " + data.formattedAddress);

            console.log("我所在的城市为 " + data.addressComponent.city);

        }

        function getSomeOfMyVal() {

            return myplace + "+" + mycity;

        }

        //解析定位错误信息

        function onError(data) {

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

        }

        function getGeolocation() {

            geolocation.getCurrentPosition();

        }

        </script>

    </body>

</html>

js高德地图手机定位的更多相关文章

  1. Android Studio之高德地图实现定位和3D地图显示

    在应用开发中,地图开发是经常需要使用的“组件”,国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码. 效果如图: 首先 ...

  2. objective-c高德地图时时定位

    这篇随笔是对上一遍servlet接口的实现. 一.项目集成高德地图 应为我这个项目使用了cocopods这个第三方库管理工具,所以只需要很简单的步骤,就能将高德地图集成到项目中,如果你没使用过这工具, ...

  3. Unity与Android交互-Unity接入高德地图实现定位以及搜索周边的功能（使用Android Studio）详细操作

    刚进公司给安排的任务就是Unity接入高德地图,算是踩了不少坑总算做出来了,抽点时间写个博客记录一下 废话不多说 先上效果图 获取定位并根据手机朝向显示周边信息            使用的Unity ...

  4. vue2使用高德地图vue-amap定位以及AMapUI标注

    前言 最近在vue里使用了高德地图vue-amap以及AMapUI,我在这里就说下如何在vue2里引入vue-amap和AmapUI以及使用定位 (在这里默认你已经安装了vue-cli) 安装 npm ...

  5. JS框架_(JQuery.js)高德地图api

    百度云盘 传送门 密码 :ko30 高德地图api效果 <!doctype html> <html> <head> <meta charset="u ...

  6. [OC][地图] 高德地图之定位初探(一)

    使用前的说明 高德地图开放平台的iOS定位模块网址-->http://lbs.amap.com/api/ios-location-sdk/summary/ 高德地图有Web端.android平台 ...

  7. JS高德地图应用 ---- 鼠标点击加入标记 & POI搜索

    代码如下 (填入Key值) : <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  8. iOS高德地图SDK定位和搜索附近信息的具体使用

    1.显示地图.定位.显示当前位置. 导入你需要的功能的头文件,申明全局变量,代理方法等等.   初始化地图,在控制器即将显示额时候打开定位和跟踪用户,这里对参数不懂的话康忙进去都有注释.   对了.i ...

  9. JS高德地图计算两地之间的实际距离

    这个是通过导航的方式来获取两地之间的实际距离,和消耗的时间(key值自己去申请哈) <!doctype html> <html> <head> <meta c ...

随机推荐

  1. 学习 JavaScript （六）核心概念：函数

    基本知识 函数对于我们来说,不算陌生的东西.中学就已经有了函数的概念,比如: y = f(x) 输入一个数 x,能够得到与之对应的一个数 y.也就是说,f(x) 的有一个返回值,这是函数在数学上的定义 ...

  2. 深度学习之卷积神经网络(CNN)的应用-验证码的生成与识别

    验证码的生成与识别 本文系作者原创,转载请注明出处:https://www.cnblogs.com/further-further-further/p/10755361.html 目录 1.验证码的制 ...

  3. 结合JDK源码看设计模式——桥接模式

    前言: 在我们还没学习框架之前,肯定都学过JDBC.百度百科对JDBC是这样介绍的[JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Jav ...

  4. nginx 隐藏版本号与WEB服务器信息

    nginx不仅可以隐藏版本信息,还支持自定义web服务器信息 先看看最终的隐藏结果吧 具体怎么实现呢,其实也很简单,请往下看 1 官网下载最新稳定版 wget http://nginx.org/dow ...

  5. C:\Program Files\Java\jdk1.7.0_79\bin\java.exe'' finished with non-zero exit value 1

    转载请标明出处:https://www.cnblogs.com/tangZH/p/10538982.html 今天,在项目过程中碰到了这个奇怪的问题,C:\Program Files\Java\jdk ...

  6. Adreno OpenCL坑——bool转int

    在项目代码中为了避免条件分支,需要把bool变成int的形式,然后通过向量运算的形式和单个单个的形式,其结果却是不同,向量的方式为(-1, 0),而单个的转换则为(1, 0) 有如下kernel代码: ...

  7. Android权限禁止及友好提示用户开通必要权限

    Android权限 Android安全架构规定:默认情况下,任何应用都没有权限执行对其他应用.操作系统或用户有不利影响的任何操作.这包括读写用户的私有数据(联系人,短信,相册,位置).读写其他应用的文 ...

  8. Redis Sentinel集群双机房容灾实施步骤

    概要目标防止双机房情况下任一个机房完全无法提供服务时如何让Redis继续提供服务.架构设计A.B两机房,其中A机房有一Master一Slave和两个Sentinel,B机房只有2个Sentinel,如 ...

  9. iOS屏幕适配 支持新手机 iPhone XR iPhone XS 超简单

    随着苹果爸爸发布了 超牛叉的iPhone iPhone X .iPhone XR.iPhone XS .iPhone XS Max.开发者的适配工作要开始了. 停,

  10. Node.js 事件循环机制

    Node.js 采用事件驱动和异步 I/O 的方式,实现了一个单线程.高并发的 JavaScript 运行时环境,而单线程就意味着同一时间只能做一件事,那么 Node.js 如何通过单线程来实现高并发 ...