How to implement city positioning and city area code adcode on mobile terminals-H5 Tutorial-php.cn

How to implement city positioning and city area code adcode on mobile terminals

不言

Release： 2018-07-26 11:01:13

Original

4641 people have browsed it

The content shared with you in this article is about how to implement city positioning and city area code adcode on the mobile terminal. The content is very detailed. Next, let’s take a look at the specific content, hoping to help friends in need.

Use AMAP positioning API:

AMap.Map('iCenter')
AMap.CitySearch()

First register on the Amap open platform to apply for the key for positioning permission. Website; Amap open platform

Introduce scripts with positioning keys on pages that need to be positioned

<!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>

Copy after login

Use Amap positioning API

Requirements: Apple devices use IP positioning, others Use gps to locate

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()
            }

        }


};

Copy after login

Related recommendations:

How to use the Chrome console to implement 3D model editing (code)

H5 WeChat payment failed to introduce WeChat’s js-sdk package Solution

The above is the detailed content of How to implement city positioning and city area code adcode on mobile terminals. For more information, please follow other related articles on the PHP Chinese website!