H5百页面利用度地图API和高德地图API获得当前位置

Posted chwl

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5百页面利用度地图API和高德地图API获得当前位置相关的知识,希望对你有一定的参考价值。

高德地图

html页面

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
 6     <title></title>
 7     <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&amp;key=e8496e8ac4b0f01100b98da5bde96597"></script>
 8     <script src="mAmaplbs.js"></script>
 9 </head>
10 <body>
11 
12 <a id="distance" onclick="getDistance()">获取距离</a>
13 <script>
14     //获取当前位置(方法名)
15     mMap.getSessionLocation(locationFunc)
16     function locationFunc(){
17         var data = JSON.parse(sessionStorage.getItem("location"));
18         console.log(data);
19         alert("lng:"+data.position.lng)
20         alert("lat:"+data.position.lat)
21     }
22 
23     // 获取两点的距离 (m)
24     function getDistance(){
25         var obj1={lng:116.39,lat: 39.98};
26         var obj2={lng:116.39,lat: 38.98};
27         alert(mMap.distance(obj1,obj2));
28         mMap.serverDistance(obj1,obj2);
29     }
30 </script>
31 </body>
32 </html>
mAmaplbs.js
//用户位置定位   使用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;
}();

  小结:以上代码放到本地的话可以获取到当前位置的经纬度以及具体位置,而当放到项目中的时候,只能获取经纬度,获取具体位置失败,报错说是key 或者network失败

                 

      解决方案: key是企业给的,感觉不会是这个问题,然而现在还是无解,不过幸好给出了当前位置的经纬度,通过交互给后台小哥哥传递经纬度,后台小哥通过对经纬度的判断                           来确定具体位置然后返回给寄几

 mMap.getSessionLocation(locationFunc)
    function locationFunc(){
        var data = JSON.parse(sessionStorage.getItem("location"));
        console.log(data);
        var lng = data.position.lng;
        var lat = data.position.lat;

         $.ajax({
             url:\'\',
             type: \'post\',
             dataType: \'json\',
             data:{
                 lng:lng,
                 lat:lat
             } ,
             success:function (res) {
                 console.log(res);
        
             }
         })
    }

复制高德地图API实例中心的代码到自己的编辑器在浏览器里查看时,位置并没有出来,无奈???

至于为什么不用百度地图API ???

定位不是有一点点的不准啊~~~~,不过还是放上代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=MU3NreHexTG9wvfCv0zjddLeEIbzLPCX"></script>

    <title>百度地图的定位</title>
</head>
<body>
<div id="allmap" style="width: 100%;height: 500px;"></div>



<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(108.95,34.27);
    map.centerAndZoom(point,12);

    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){console.log(r.point)
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);//标出所在地
            map.panTo(r.point);//地图中心移动
            //alert(\'您的位置:\'+r.point.lng+\',\'+r.point.lat);
            var point = new BMap.Point(r.point.lng,r.point.lat);//用所定位的经纬度查找所在地省市街道等信息
            var gc = new BMap.Geocoder();
            gc.getLocation(point, function(rs){
                var addComp = rs.addressComponents; console.log(rs.address);//地址信息
                alert(rs.address);//弹出所在地址

            });
        }else {
            alert(\'failed\'+this.getStatus());
        }
    },{enableHighAccuracy: true})
</script>


</body>
</html>

上面代码里的key值要到官方API申请哦~

 

写的好乱~~~正在努力改进!!!

 

 

 



 

以上是关于H5百页面利用度地图API和高德地图API获得当前位置的主要内容,如果未能解决你的问题,请参考以下文章

如何通过地图API获得任意两个地点的距离

腾讯地图或高德地图api开发,手机web页面能实现连续定位吗

利用高德地图 API 显示地图信息

关于JS接高德地图API,以及坐标偏移坐标转换

如何利用JavaScript API绘制高德地图

如何利用JavaScript API绘制高德地图