关于定位，分为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. EasyUI 扩展自定义EasyUI校验规则 验证规则（常用的）

    $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (value, param) { return /^[\u ...

  2. 更新gitignore

    更新: 2017/04/26  修正windows版本下的命令   git rm -r --cached .       (Windows 下的版本) 更新: 2017/06/06  mac下的命令也 ...

  3. poj2239 poj1274【二分匹配】

    题意: 就是尽可能的选多的课 思路: 把课程和上课的时间看作二分图 跑一跑二分匹配就好了 #include<iostream> #include<cstdio> #includ ...

  4. python 字符串操作一

    一.创建字符串 >>> s1 = '12345' >>> s1 '12345' >>> s2 = str(12345) >>> ...

  5. firewall-cmd 使用总结

    firewalld的简要说明: firewalld .firewall-cmd .firewall-offline-cmd它们Python脚本,通过定义的在/usr/lib/firewalld下面的x ...

  6. Zookeeper的多节点集群详细启动步骤（3或5节点）

    分为 (1)分别去3或5节点上去启动Zookeeper进程 (2)自己写个脚本,直接在主节点上去启动Zookeeper进程. (1)分别去3或5节点上去启动Zookeeper进程 第一步: [hado ...

  7. hdu1301 Jungle Roads 基础最小生成树

    #include<iostream> #include<algorithm> using namespace std; ; int n, m; ]; struct node { ...

  8. Selenium | 基础入门 | 截屏并保存于本地

    可先参考   Selenium | 基础入门 | 利用Xpath寻找用户框 核心代码: //截屏操作 File srcFile = ((TakesScreenshot)driver).getScree ...

  9. ulimit资源配置

    基本理解 linux对每个用户能使用的系统资源有一定限制.如果没有限制,在多用户登录,并且都消耗大量资源时,对系统产生复杂的影响.ulimit内建一套参数,来规定一个用户能使用多少资源. [root@ ...

  10. RHEL6.5、RHEL7.2忘记ROOT密码恢复小结

    RHEL6.5忘记root密码恢复步骤 RHEL7.2恢复密码步骤 5.耐心等待重启完成即可实现重置root密码 也可以按如下做法 依次执行chroot /sysroot/,passwd===> ...