关于定位，分为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. django上课笔记4-复习数据库操作-复习模板-Seccion-详细cookie和session的区别

    一.复习数据库操作 字段类型 字符串 EmailField(CharField): IPAddressField(Field) URLField(CharField) SlugField(CharFi ...

  2. checkbox设置单选的的两种方式

    一.如果 <input name="ck" type="checkbox">是页面加载就有的 $("#input[name=ck]&quo ...

  3. Tomcat黑窗口改变Title

    start cmd /K " && call startup.bat && pause && exit " 设置Title之后,再手 ...

  4. hdoj5024【BFS/暴力】

    题意: 在可以行走的区域内,只能转一次90度的弯,问你最长这条路可以多长. 思路: 我们可以看到 /* 123 8 4 765 */ 转90度的路径会是横竖,也就是1-3-5-7; 还有斜的:2-4- ...

  5. bzoj 2588: Spoj 10628. Count on a tree【主席树+倍增】

    算是板子,把值离散化,每个点到跟上做主席树,然后查询的时候主席树上用u+v-lca-fa[lca]的值二分 #include<iostream> #include<cstdio> ...

  6. RAID基础

    磁盘类型 类型 IDE Integrated Drive Electronics SATA Srial ATA SCSI Small Computer System Interface FC Fibe ...

  7. rhel7使用centos7yum组件

    1)rpm -qa|grep yum --查看已安装的yum组件包 2)rpm -e 包名 --nodeps --卸载包 3)下载安装以下组件包: 使用rpm -ivh yum-* yum-3.4.3 ...

  8. 基于Java实现的冒泡排序算法

    冒泡排序是一种简单基础的排序算法,相信在大学课堂里老师已经讲过了,现在我基于Java来实现一遍. 简述 冒泡排序正如其关键词一样,杂乱的气泡经过浮动,最后大的气泡飘到了上面而小的气泡在下面,无序的元素 ...

  9. 【js数据结构】图的深度优先搜索与广度优先搜索

    图类的构建 function Graph(v) {this.vertices = v;this.edges = 0;this.adj = []; for (var i = 0; i < this ...

  10. android studio 新建文件出错