<!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. 使用MongoDB在项目中实际运用

    一.MongoDB,一个数据库,我们怎么去使用它呢?我们首先了解一下什么是MongoDb 官网的介绍是:MongoDB是专为可扩展性,高性能和高可用性而设计的数据库.它可以从单服务器部署扩展到大型.复 ...

  2. 一个小实例理解js 原型和继承

    导语1:一个构造函数的原型对象,其实就是这个构造函数的一个属性而已,属性名叫prototype,值是一个对象,对象中有一些属性和方法,所以每个构造函数的实例对象都拥有这些属性和方法的使用权. 导语2: ...

  3. 第一课《.net之--泛型》

    今天我来学习泛型,泛型是编程入门学习的基础类型,从.net诞生2.0开始就出现了泛型,今天我们开始学习泛型的语法和使用. 什么是泛型? 泛型(generic)是C#语言2.0和通用语言运行时(CLR) ...

  4. office365的开发者训练营，免费，在微软广州举办

    本活动在微软官网的地址: https://www.microsoft.com/china/events/detail_1707   先上活动内容:   Office 365每月有超过1亿的商业活跃用户 ...

  5. Proj.Net 投影介绍

    Proj.Net是开源地图投影库Proj.4的.net版本,许多GIS开源软件的投影都直接或间接地使用Proj.4的库,Proj.4是用C语言编写..Net下的开源GIS项目NetTopologySu ...

  6. 安卓开发笔记（十九）：异步消息处理机制实现更新软件UI

    主界面代码 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:andr ...

  7. Windows Server 2016-DNS 新增或改进功能

    本章节补充介绍在 Windows Server 2016 中域名系统 (DNS) 服务器新增或已更改的功能相关信息,具体内容如下: 功能 新增或改进 描述 DNS 策略 新增 您可以配置 DNS 策略 ...

  8. 搭建环境-Monkeyrunner-自动化测试工具

    这篇博客帮助挺大,我补充部分,帮助同样的小白哈哈,侵删 https://www.cnblogs.com/lynn-li/p/5885001.html 1.前期准备 需要安装:JDK,SDK,pytho ...

  9. Socket模拟HTTP请求

    WEB服务器可以可以理解为socket的上层封装,其也是TCP/IP协议,只要知道其IP地址和端口号就可以与他进行通信了 与WEB服务器数据交互,其重点在于请求头,如果请求头不对则不能进行数据传输 简 ...

  10. 生产环境中学习Redis

    摘要 看到这篇文章,很有借鉴意义,因此写个读书笔记,不算是翻译.想要深入了解,请看原文http://tech.trivago.com/2017/01/25/learn-redis-the-hard-w ...