关于定位，分为GPS定位和网络定位。本文将详细描述的浏览器定位，属于网络定位。这是一种通过使用高德JS-API来实现位置定位、城市定位的方法，包含了IP定位，检索等多种网络定位方式。如果您的手机支持GPS功能，能够自动获取GPS信息，定位将更加准确。

浏览器定位

浏览器定位插件，封装了标准的HTML5定位，并含纠正模块，同时该定位方式仅适用于支持HTML5的浏览器上，如Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera等。代码如下:

    /**

    * Created by ly-wangweiq on 2015/7/29.

    * * support mobile

    */

    //用户位置定位   使用geolocation定位

    var mMap=function(){

    function rad(d){

        return d*Math.PI/180.0;

    }

    this.map={},

    this.geolocation={},

    this.k=0,

    //加载地图，调用浏览器定位服务

    this.initMap=function(mapContainer,completFunc){

        if(typeof(AMap)=="object"){

            this.map = new AMap.Map(mapContainer, {

             resizeEnable: true

         });

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

            this.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

            });

            this.map.addControl(this.geolocation);

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

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

        });

        function onComplete(data){

            console.log(completFunc)

            console.log(data)

            if(completFunc){

                completFunc(data);

            }

        }

        function onError(){

            var str = '定位失败,';

            str += '错误信息：'

            switch(data.info) {

                case 'PERMISSION_DENIED':

                    str += '浏览器阻止了定位操作';

                    break;

                case 'POSITION_UNAVAILBLE':

                    str += '无法获得当前位置';

                    break;

                case 'TIMEOUT':

                    str += '定位超时';

                    break;

                default:

                    str += '未知错误';

                    break;

            }

            alert(str)

        }

    }

},

 this.getCurrentPosition=function(callback){

    if(typeof(this.geolocation.getCurrentPosition)!='undefined'){

        this.geolocation.getCurrentPosition();

    }else{

        setTimeout(function(){

            //将获得的经纬度信息，放入sessionStorge

            this.getSessionLocation(callback)

        },200)

    }

},

this.distance = function(obj1,obj2){//return：m

    var lng=new AMap.LngLat(obj1.lng, obj1.lat);

    var lag=new AMap.LngLat(obj2.lng, obj2.lat);

    var ss=lng.distance(lag);

    return ss;

},

this.getSessionLocation=function(callback){

    if(sessionStorage.getItem('location')){

        callback();

    }else{

        this.initMap('',function(data){

            sessionStorage.setItem("location",JSON.stringify(data))

            callback();

        });

        this.getCurrentPosition(callback);

       }

    },

    /*

     *两点之间的距离

   *（lng1.lat1）地址一的经纬度

   *（lng2.lat2）地址一的经纬度

   *单位米

*/

 this.serverDistance = function(obj1,obj2){//return：m

    var radLat1 = rad(obj1.lat);

    var radLat2 = rad(obj2.lat);

    var a = radLat1 - radLat2;

    var b = rad(obj1.lng)- rad(obj2.lng);

    var s =  2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));

        s = s *6378137;

        s = Math.round(s * 10000)/10000 ;

    return s;

}

return this;

}();

这里将定位获取的信息存入sessionStorge中，这样只需要首次访问时，需要定位，之后都可以从sessionStorge中得到，大大提高了速度。

下面将演示调用定位和两点距离的实例。

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>

<title></title>

<script language="javascript" src="http://webapi.amap.com/maps?v=1.3&amp;key=e8496e8ac4b0f01100b98da5bde96597"></script>

<script src="mAmaplbs.js"></script>

</head>

<body>

<a id="distance" onclick="getDistance()">获取距离</a>

<script>

//获取当前位置(方法名)

mMap.getSessionLocation(locationFunc)

function locationFunc(){

    var data = JSON.parse(sessionStorage.getItem("location"));

    alert("lng:"+data.position.lng)

    alert("lat:"+data.position.lat)

}

// 获取两点的距离 (m)

function getDistance(){

    var obj1={lng:116.39,lat: 39.98};

    var obj2={lng:116.39,lat: 38.98};

    alert(mMap.distance(obj1,obj2));

    mMap.serverDistance(obj1,obj2);

}

</script>

</body>

</html>

其中”webapi.amap.com/maps?v=1.3&key=e8496e8ac4b0f01100b98da5bde96597这里面的key,需要在高德API网站获取[http://lbs.amap.com/]。

高德地图api之location定位的更多相关文章

  1. 【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

    原文:[高德地图API]从零开始学高德JS API(七)——定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为w ...

  2. 安卓开发笔记①：利用高德地图API进行定位、开发电子围栏、天气预报、轨迹记录、搜索周边（位置）

    高德地图开发时需要导入的包在下面的网盘链接中:(由于高德地图api更新得太快,官网上最新的包使用起来没有之前的方便,所以以下提供最全面的原始包) 链接:http://pan.baidu.com/s/1 ...

  3. 高德地图API应用

    高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...

  4. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  5. 【高德地图API】从零开始学高德JS API（八）——地址解析与逆地址解析

    原文:[高德地图API]从零开始学高德JS API(八)——地址解析与逆地址解析 摘要:无论是百度LBS开放平台,还是高德LBS开放平台,其调用量最高的接口,必然是定位,其次就是地址解析了,又称为地理 ...

  6. 【高德地图API】从零开始学高德JS API（六）——坐标转换

    原文:[高德地图API]从零开始学高德JS API(六)——坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? --- ...

  7. 【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

    原文:[高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公 ...

  8. 安卓---高德地图API应用

    说明:定位需要导入android_location 的jar包,如果没有会报错,这个官方网站好像找不到,这是我在网上找到的一个链接 http://download.csdn.net/detail/ra ...

  9. 高德地图 API 计算两个城市之间的距离

    1. 目前在项目中,遇到一个需求不会做,就是要计算两个城市之间的距离,而这两个城市的输入是可变的,如果要使用数据库来先存储两地之间的距离,调用的时候再来调用,那么存数据的时候,要哭的,因为光是省级区域 ...

随机推荐

  1. 所读STL文章摘要集结

    在网上看了一些STL相关文章,这里将它们的摘要进行集结,方便以后查找. 1.黄常标,林俊义,江开勇.快速成形中STL文件拓扑信息的快速建立.2004 摘要:在分析现有建立拓扑信息方法的基础上,提出基于 ...

  2. Swift里计数相关的小细节

    Swift里对于字符串这些引入了index型,相对其他语言而言字符操作更安全了,但是问题就是一不注意搞错范围就会有各种离奇的bug. 在讲主题前,先说个小细节. Swift里非常严密的定义了一大堆字符 ...

  3. Codeforces645C【二分】

    题意: 给你一个序列,0表示空,1表示非空 你需要填k+1个位置,然后找出某一点到其他所有点都是最近的,然后输出一个最近的情况的最远点. 思路: 哎,好菜哦...不会写这个二分... 遍历每个可取的位 ...

  4. IT兄弟连 JavaWeb教程 Servlet表单乱码问题

    在使用原生的Servlet进行Web应用开发时经常会遇到一些中文乱码问题,造成乱码问题的原因只有一个:即客户端与服务端的字符编码不一致所导致的. 请求参数乱码问题 服务器端获取客户端传递过来的数据出现 ...

  5. 并查集 HDOJ 1232 畅通工程

    题目传送门 /* 并查集(Union-Find)裸题 并查集三个函数:初始化Init,寻找根节点Find,连通Union 考察:连通边数问题 */ #include <cstdio> #i ...

  6. 7.1 Java集合概述

    List 有序.重复的集合 Set 无序.不可重复的集合 Map 具有映射关系的集合 jdk1.5之后.Java增加了Queue体系集合,代表一种队列集合实现

  7. Reference for shell scripting

    ${var} 和 $var的区别 http://stackoverflow.com/questions/8748831/when-do-we-need-curly-braces-in-variable ...

  8. ui自动化测试的意义与理解

    分层测试的思想 分层测试(有的也叫测试金字塔)是最近几年慢慢流行.火热起来的,也逐渐得到了大家的认可,大家应该已经比较熟悉分层测试的思想了,不太了解的可以自行找一些相应的渠道去补充一下上下文的知识. ...

  9. HTML5实现页面自动跳转

    初学H5,书上说的是<meta http-equiv="refresh" content="5“ url=”./error.html"/>这样可以实 ...

  10. 堆参数-XMS 与-XMX的说明

    XMS : JVM初始分配的堆内存 XMX : JVM最大允许分配的堆内存,按需分配 堆内存分配: JVM初始分配的堆内存由-Xms指定,默认是物理内存的1/64: JVM最大分配的堆内存由-Xmx指 ...