关于定位，分为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. FZU2277 Change（dfs序+树状数组）

    传送门 题意 q次操作,操作有两种: 1 v x k:a[v]+=x,a[v']+=x-k(v'是v的子节点)... 2 v:查询\(a[v]mod(10^9+7)\) 分析 子节点增加的值为\(x+ ...

  2. bzoj 4259 4259: 残缺的字符串【FFT】

    和bzoj 4503 https://www.cnblogs.com/lokiii/p/10032311.html 差不多,就是再乘上一个原串字符 有点卡常,先在点值下算最后一起IDFT #inclu ...

  3. 安装elasticsearch-head

    直接安装chrome插件,用npm老出错,shit 再说吧 使用插件连接的时候反而没有出错,后续如果出错 , 可以配置 elasticsearch下config下的y 在新的电脑上使用发现格式不对,比 ...

  4. AFNetworking https自签名证书 -1012 解决方案

    AFSecurityPolicy *securityPolicy = [AFSecurityPolicy defaultPolicy]; //是否信任服务器无效或过期的SSL证书.默认为“不”. se ...

  5. Codeforces 1108F（克鲁斯卡尔的理解）

    最小生成树会多样的情况是:两个或多个边等长且连通同样的两个并查集块. 所以可以跑一遍克鲁斯卡尔,每次把当前等长的边数出来,注意不要边找边并查,因为有一部分边是正常跑生成树我们也不会要他的,这种直接跳了 ...

  6. 递推DP URAL 1031 Railway Tickets

    题目传送门 /* 简单递推DP:读题烦!在区间内的都更新一遍,dp[]初始化INF 注意:s1与s2大小不一定,坑! 详细解释:http://blog.csdn.net/kk303/article/d ...

  7. linux实现多台服务器文件同步

    inotify-tools+rsync实时同步文件安装和配置 Linux+Nginx+PHP+MySQL+MemCached+eaccelerator安装优化记录(见 http://www.linux ...

  8. 在HTML页面中实时获取新消息的方法 “JavaScript中的setInterval用法”

    JavaScript中的setInterval用法(资料来源:博主---八神吻你   ) setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象.可以使用本动作更新来自数 ...

  9. Excel 宏练习

    任务描述: 利用 Excel 绘制函数图像 f(x)=x^2/3+0.9*(3.3-x^2)^1/2*sin(a*x),并通过按钮事件来刷新图像. 问题分析: 可以参考类似 Matlab 绘图的方式, ...

  10. MySQL系列：隐式类型转化可能带来的坑

    在开发规范中,我们往往会要求研发避免在where条件中出现隐式类型转换,这么要求大概有以下两方面的原因: 隐式类型转换可能导致索引失效: 隐式类型转换可能产生非预期的结果. 注:这里说的是隐式类型转换 ...