<!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 入门：(2) String

    第1篇:https://www.cnblogs.com/cgzl/p/10294175.html‘ 本文简单介绍一下Redis的常用数据类型String. 基本上都是文档上的内容,所以比较无聊.... ...

  2. python输出彩色字体

    Python终端如何输出彩色字体 实现过程:       终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.       转义序列是以ESC开头,即用\033来完成(ES ...

  3. Jedis异常解决：NOAUTH Authentication required

    引言 之前项目能够正常运行,因为默认选择db0,后来新的需求来了,不是默认db0,而是给参数选择db. 修改后代码如下,却报错NOAUTH Authentication required. 解决方法 ...

  4. .NET Core中使用AutoMapper

    何为AutoMapper AutoMapper是对象到对象的映射工具.在完成映射规则之后,AutoMapper可以将源对象转换为目标对象. 安装AutoMapper 这里我们在NuGet中下载安装Au ...

  5. SLAM+语音机器人DIY系列：（六）SLAM建图与自主避障导航——2.google-cartographer机器人SLAM建图

    摘要 通过前面的基础学习,本章进入最为激动的机器人自主导航的学习.在前面的学习铺垫后,终于迎来了最大乐趣的时刻,就是赋予我们的miiboo机器人能自由行走的生命.本章将围绕机器人SLAM建图.导航避障 ...

  6. visual studio code .net 开发

    Visual Studio确实是相当好用,各种简化操作什么的简直不要太舒服.但其容量太大,有时不是很方便,所以今天简单介绍一下另一个工具--Visual Studio Code. 虽然相比于老大哥Vi ...

  7. 景观指数分析 - 初识FragStats4.2

    引 言 FragStats景观格局分析软件 ,简单扼要地说就是景观指数的集成分析环境,不用自己编写相关的算法和读/取文件的开发.根据了解,FragStats(Fragment Statistic)官方 ...

  8. devm_xxx机制【转】

    前言 devm是内核提供的基础机制,用于方便驱动开发者所分配资源的自动回收.参考内核文档devres.txt.总的来说,就是驱动开发者只需要调用这类接口分配期望的资源,不用关心释放问题.这些资源的释放 ...

  9. Django【部署】uwsgi+nginx

    uwsgi 遵循wsgi协议的web服务器 uwsgi的安装 pip install uwsgi uwsgi的配置 项目部署时,需要把settings.py文件夹下的: DEBUG = FALSE A ...

  10. 还原堆栈信息，分析地形系统使用ASTC格式的纹理导致Crash的问题

    0x00 前言 在这篇文章中,我们选择了过去一周Unity官方社区交流群中比较有代表性的几个问题,总结在这里和大家进行分享.主要涵盖了IL2CPP.Scripting.Virtual Reality. ...