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

2021-02-16 17:17

阅读：368

高德地图

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&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申请哦~

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

上一篇：【API】获取系统内存所有状态

下一篇：C# 保留小数位数的方法

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：H5百页面利用度地图API和高德地图API获得当前位置
文章链接：http://soscw.com/index.php/essay/56182.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章