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

本篇文章分享给大家的内容是关于如何实现移动端的城市定位以及城市区域代码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的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法