<!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. ASP.NET Core的实时库: SignalR -- 预备知识

    大纲 本系列会分为2-3篇文章. 第一篇介绍SignalR的预备知识和原理 然后会介绍SignalR和如何在ASP.NET Core里使用SignalR. 本文的目录如下: 实时Web简述 Long ...

  2. Asp.Net Core 轻松学-使用MariaDB/MySql/PostgreSQL和支持多个上下文对象

    前言 在上一篇文章中(Asp.Net Core 轻松学-10分钟使用EFCore连接MSSQL数据库)[https://www.cnblogs.com/viter/p/10243577.html],介 ...

  3. QT文件操作

    /* 写文件 */ QFile file(filePath); bool bo = file.open(QIODevice::WriteOnly | QIODevice::Append); //qDe ...

  4. 两篇文章带你走入.NET Core 世界：Kestrel+Nginx+Supervisor 部署上云服务器（二）

    背景: 上一篇:两篇文章带你走入.NET Core 世界:CentOS+Kestrel+Ngnix 虚拟机先走一遍(一) 已经交待了背景,这篇就省下背景了,这是第二篇文章了,看完就木有下篇了. 直接进 ...

  5. WaitGroup

    WaitGroup在go语言中,用于线程同步,单从字面意思理解,wait等待的意思,group组.团队的意思,WaitGroup就是指等待一组,等待一个系列执行完成后才会继续向下执行. 先说说Wait ...

  6. 线性回归预测PM2.5----台大李宏毅机器学习作业1(HW1)

    一.作业说明 给定训练集train.csv,要求根据前9个小时的空气监测情况预测第10个小时的PM2.5含量. 训练集介绍: (1)CSV文件,包含台湾丰原地区240天的气象观测资料(取每个月前20天 ...

  7. SpringBoot 2.X集成Hive-jdbc 3.1.1

    最近公司有一个需求,需求的内容是根据用户页面选择的参数条件查询Hive,数量量大致是300万以内,要求3秒响应.使用的其它的技术就不要说了,先说说SpingBoot集成Hive-jdbc吧,网上虽然有 ...

  8. RocketMQ4.4.0新特性分享

    rocketmq1.架构 MQ历史 由数据结构队列发展而来 MQ使用场景 异步处理 解耦 削峰填谷 数据同步2.队列3.使用 生产 同步(sync) 默认重试2次总共3次 默认等待超时时间为3s 异步 ...

  9. 【重学计算机】机组D8章：输入输出系统

    1. 输入输出系统概述 组成:外设.接口.总线.管理软件 基本功能 完成计算机内外的信息传递 保证CPU正确选择输出设备 利用缓冲等,实现主机与外设的速度匹配 特点:异步性.实时性.设备无关性 输入过 ...

  10. 用命令行撤销工作区的所有更改（修改文件&&新增文件）

    话说起来之前放弃工作区所有的更改,我一直都是直接用VSCode在workingTree的按钮,如下:   直到有一天我感觉这样不够酷,于是我试了git reset --hard. 然并卵,这个命令虽然 ...