• 技术文章 >web前端 >H5教程

    如何实现移动端的城市定位以及城市区域代码adcode

    不言不言2018-07-26 11:01:13原创3484
    本篇文章分享给大家的内容是关于如何实现移动端的城市定位以及城市区域代码adcode,内容很详细,接下来我们就来看看具体的内容,希望可以帮助到有需要的朋友。

    使用高德定位API :

    1. AMap.Map('iCenter')

    2. AMap.CitySearch()

    先在高德开放平台注册申请定位权限的key。 网站;高德开放平台

    在需要定位的页面引入有定位key的script

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <title>基本引入展示</title>
        <script src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>
    
    </head>
    <body>
    <p id="container"></p>
    
    </body>
    </html>

    使用高德定位API

    需求:苹果设备使用IP定位,其他使用gps定位

    function getlocation() {
    
    
      
                var u = navigator.userAgent;
    
                var ua = navigator.userAgent.toLowerCase();
    
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
                var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    
    
                //GPS定位
                function locationForGPS() {
                /*********跟踪标记**********/   console.log('GPS定位开始+++');
                    var map, geolocation;
                    //加载地图,调用浏览器定位服务
                    map = new AMap.Map('iCenter');
                    map.plugin('AMap.Geolocation', function() {
                        geolocation = new AMap.Geolocation({
                            enableHighAccuracy: false,//是否使用高精度定位,默认:true
                            timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                        });
                        map.addControl(geolocation);
                        geolocation.getCurrentPosition();
                        
                        //getCityInfo是高德GPS定位里面的一个方法,先返回ip定位数据,由于IP定位有可能不准确,所以后面用GPS数据修正
                        //
                        geolocation.getCityInfo(function(status,result){
                        /*********跟踪标记**********/    console.log('与GPS同步IP定位开始,进行数据写入+++');
                            if (status === 'complete' && result.info === 'SUCCESS') {
                        /*********跟踪标记**********/    console.log('同步IP定位成功,进行数据写入+++');
                                if(isNull(sessionStorage.getItem('autouserchooselocationct'))){
                                    /*********跟踪标记**********/     console.log('未检测检查有上一次定位数据,进行数据写入+++');
                                    let cityAdcode=result.adcode;
                                    let cityName=result.city;
                                    
                                    sessionStorage.setItem('autouserchooselocationct', cityName);
                                    sessionStorage.setItem('autouserchooselocationcode', cityAdcode);
    
                               
                                     /*********跟踪标记**********/    console.log('同步IP定位结束,进行数据写入完成+++');
                                }
                            }
                        });
    
    
                        AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
                        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    
    
    
    
                    });
    
                    //GPS定位成功
                    function onComplete(data) {
                        console.log(data)
                         /*********跟踪标记**********/  console.log('GPS定位启动+++');
                         //gsp定位精确到区,返回的adcode精确到了城市下属的区域,
                         //想要获取城市的abcode还需要使用高德的另一个API,城市区域查询
                       
                        let cityName=data.addressComponent.city;
    
                        let geocoder = new AMap.Geocoder({});
                        //地理编码,返回地理编码结果,
                        
                        geocoder.getLocation(cityName, function(status, result) {
                            if (status === 'complete' && result.info === 'OK') {
                            /*********跟踪标记**********/       console.log('GPS定位成功,处理定位数据+++');
    
                            /*********跟踪标记**********/     console.log('进行数据写入,覆盖同步IP的数据+++');
                                    let cityAdcode=result.geocodes[0].adcode;
                                    sessionStorage.setItem('autouserchooselocationct', cityName);
                                    sessionStorage.setItem('autouserchooselocationcode', cityAdcode);
                         
                                   /*********跟踪标记**********/    console.log('GPS定位结束,进行数据写入完成+++');
                                }
    
    
                        });
    
                    }
    
                    //GPS定位失败
                    function onError() {
                        /*********跟踪标记**********/ console.log('GPS定位失败开始启用ip定位+++');
                        locationForIp(true);
                         /*********跟踪标记**********/  console.log('gps-ip++...')
                    }
    
                }
    
                //IP定位
                function locationForIp(tap) {
                     /*********跟踪标记**********/if(tap){ console.log('GPS定位失败开始启用ip定位+++');}
                         /*********跟踪标记**********/ console.log('ip定位开始+++');
                    var citysearch = new AMap.CitySearch();
                    //自动获取用户IP,返回当前城市
                    citysearch.getLocalCity(function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            if (result && result.city && result.bounds) {
                                let GetUserLocation = result.city,
                                    GetUserLocationcode = result.adcode;
                                    /*********跟踪标记**********/console.log('ip定位成功,开始检查是否有上一次定位数据+++');
                                if(isNull(sessionStorage.getItem('autouserchooselocationct'))){
                                 /*********跟踪标记**********/console.log('ip定位成功,未检测检查有上一次定位数据,进行数据写入+++');
                                    sessionStorage.setItem('autouserchooselocationct', GetUserLocation);
                                    sessionStorage.setItem('autouserchooselocationcode', GetUserLocationcode);
    
                         
                                 /*********跟踪标记**********/console.log('ip定位成功,进行数据写入结束+++');
                                }
                            }
                        } else {
    
                       
                     /*********跟踪标记**********/console.log('ip定位失败,进行数据写入结束+++');
                        }
    
                    })
    
                }
    
                if(isiOS){
                    /*********跟踪标记**********/console.log('ios设备启用IP定位');
                    locationForIp(false);
    
                }else {
                    /*********跟踪标记**********/console.log('非ios设备启用GPS定位');
                    locationForGPS()
                }
    
            }
    
    
    };

    相关推荐:

    如何使用Chrome控制台进行3D模型编辑的实现(代码)

    H5微信支付之引入微信的js-sdk包失败的解决方法

    以上就是如何实现移动端的城市定位以及城市区域代码adcode的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:iphone html5 javascript
    上一篇:如何使用Chrome控制台进行3D模型编辑的实现(代码) 下一篇:h5新特性的用法:监听App自带的返回键
    php培训_php实战培训【立即报名】-php中文网第20期

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 分享HTML5虚拟键盘出现挡住输入框的解决办法• HTML5实践-三步实现响应式设计的详细介绍• HTML5边玩边学(二)-基础绘图• HTML5 b和i标记将被赋予真正的语义_html5教程技巧• 腾讯技术干货!做一个让人闻风丧胆的HTML5页面
    1/1

    PHP中文网