<!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. Redis in .NET Core 入门：(5) Sorted SET

    第1篇:https://www.cnblogs.com/cgzl/p/10294175.html 第2篇 String:https://www.cnblogs.com/cgzl/p/10297565. ...

  2. Django-restframework 之认证源码分析

    Django-restframework 源码分析之认证 前言 最近学习了 django 的一个 restframework 框架,对于里面的执行流程产生了兴趣,经过昨天一晚上初步搞清楚了执行流程(部 ...

  3. 搜狗输入法与VS快捷键有冲突_处理办法

    前言:搜狗输入法是大家常用的文字输入工具,但是在开启输入法的时候,VS的一些快捷键无法正常使用,如智能提示快捷键:Ctrl+.,这就非常尴尬了,除非把输入法切换成英文或者卸载搜狗改别的输入法,一个是切 ...

  4. Hibernate学习——持久化类的学习

    A.概念 持久化:将内存中的对象持久化(存储)到数据库的过程.Hibernate就是持久化的框架. 持久化类:一个普通java对象与数据库的表建立了映射关系,那么这个类在Hiberna中被称为持久化类 ...

  5. Oracle数据库升级注意事项

    1 备份配置参数 数据库升级前的配置参数要备份,如PGA大小 这样数据库升级后还可以升级前的配置,而不至于使用安装升级时的默认配置 2 检查版本兼容 确认数据库升级后是否对生产环境上的代码有影响,如果 ...

  6. sql server2005安装时报 ‘服务无法启动’

    SQL server服务无法启动的原因分析: 在安装SQL 2005标准版(不多于四个CPU)和企业版(无限制)时,CPU的总核数必须是2的n次方.即核心数为1,2,4,8,16,32依次类推.因BL ...

  7. 【SQL Server】利用游标将学生表中的成绩转化为绩点

    软件工程综合实践第一次作业 代码来源:班上同学的数据库大作业 alter table sc add GPA float; --加入绩点列 alter table sc ,);--将表按原始位置顺序编号 ...

  8. python3 文件操作练习 r+ w+ a+ 的理解

    突然来一句:“慨然有经略四方之志” 文件操作三部曲:1.先用open打开 2.再写关闭  3.再回到中间写操作     为啥要刚打开就关闭 那是很容易望,所以先写上... 基本格式 f = open( ...

  9. nginx之location配置详解及案例

    语法规则: location [=|~|~*|^~] /uri/ { … } =  开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码, ...

  10. ES6 模块化笔记

    ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量. ES6 模块不是对象,而是通过export命令显式指定输出的代码,再通过import命令输入. // ...