h5 實現定位


直接上代碼,代碼使用了vue相關的語法 並且引入了dialog插件 ,使用時直接調用getLocation()方法就可以了!

// 定位
        function getLocation(){
            console.log(navigator)
            if (navigator.geolocation){
                navigator.geolocation.getCurrentPosition(showPosition,showError);
            }
            else{
                window.console("Geolocation is not supported by this browser.");
                _self.$dialog.alert({
                        message: '您的設備不支持定位功能,請手動選擇'
                    }).then(function(){
                        _self.$router.push('location');
                    });
            }
        }
        function showPosition(position){
            console.log("Latitude: " + position.coords.latitude +"<br />Longitude: " + position.coords.longitude);
            localStorage.setItem('position_lat',position.coords.latitude);
            localStorage.setItem('position_long',position.coords.longitude);
            var latlon = position.coords.latitude +','+position.coords.longitude;
            //baidu 
            var urlBaidu = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"; 
            var urlGoogle = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; 

            _self.$http.jsonp(urlBaidu).then(function(res){
                var res = JSON.parse(res.bodyText);
                var locIso = res.result.addressComponent.country_code_iso;
                
                if(res.result.addressComponent.country !='China'){
                    _self.$dialog.confirm({
                        message: '根據定位,您所在的區域尚未開放服務,是否手動選擇區域'
                    }).then(function(){
                        localStorage.setItem('position_loc',res.result.addressComponent.country);
                        _self.$router.push('location');
                    }).catch(function(){
                    });
                }else{
                    localStorage.setItem('position_loc',_self.Kit.getCountryMcc(locIso));
                    _self.$router.push('home');
                }
            },function(res){
                console.log(res);
            })
        }
        function showError(error) {
            localStorage.removeItem('position_loc');
            switch (error.code) {
                case error.PERMISSION_DENIED:
                        // 用於本地測試
                    _self.$dialog.alert({
                        message: '您已拒絕請求地理位置信息'
                    }).then(function(){
                        _self.$router.push('location');
                    });
                    break;
                case error.POSITION_UNAVAILABLE:
                    _self.$dialog.alert({
                        message: '位置信息不可用,請手動選擇'
                    }).then(function(){
                        _self.$router.push('location');
                    });
                    break;
                case error.TIMEOUT:
                    _self.$dialog.alert({
                        message: '請求獲取用戶位置超時,請手動選擇'
                    }).then(function(){
                        _self.$router.push('location');
                    });
                    break;
                case error.UNKNOWN_ERROR:
                    _self.$dialog.alert({
                        message: '定位系統失效,請手動選擇'
                    }).then(function(){
                        _self.$router.push('location');
                    });
                    break;
            }
        }

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM