H5頁面利用度地圖API和高德地圖API得到當前位置

時間 2019-11-11

標籤 h5 頁面利用地圖 api 得到當前位置简体版

原文原文鏈接

高德地圖javascript

html頁面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失敗java

解決方案： key是企業給的，感受不會是這個問題，然而如今仍是無解，不過幸虧給出了當前位置的經緯度，經過交互給後臺小哥哥傳遞經緯度，後臺小哥經過對經緯度的判斷來肯定具體位置而後返回給寄幾web

 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實例中心的代碼到本身的編輯器在瀏覽器裏查看時，位置並無出來，無奈？？？ajax

至於爲何不用百度地圖API ???json

定位不是有一點點的不許啊~~~~，不過仍是放上代碼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>