• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

凉梁凉糕

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

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;
            }
        }

  

posted on 2018-08-13 13:55  凉梁凉糕  阅读(2303)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3