高德,百度地图获取省市区

9 篇文章 0 订阅
7 篇文章 0 订阅

近期,遇到一个根据定位获取省市区的需求,前期用了加载百度地图js的方式,经过实验,https在部分ios手机上都获取不到省市区。后来发现是百度地图API中getCurrentPosition方法提示错误。
现在的解决方案:先获取H5经纬度,获取到后调用高德地图接口的方式获取,如果失败,再去请求百度地图服务端api的方式。如果经纬度获取失败,则尝试加载高德地图js的方式。
把它封装起来:

 getGeography() {
            if (navigator.geolocation) { //H5获取经纬度
                navigator.geolocation.getCurrentPosition(
                    function(position) {
                        var latitudes = position.coords.latitude; //获取纬度
                        var longitudes = position.coords.longitude; //获取经度
                        window.latitudes = position.coords.latitude; //获取纬度
                        window.longitudes = position.coords.longitude; //获取经度
                        getGaoDe(latitudes, longitudes) //获取到经纬度后,优先获取高德服务端api接口返回的省市县,如果失败,则用百度获取
                            function getGaoDe(latitudes, longitudes) { //首先获取高德接口返回的省市区
                                var loaction = longitudes + "," + latitudes;
                                $jQuery.ajax({
                                    url: "https://restapi.amap.com/v3/geocode/regeo",
                                    type: "GET",
                                    cache: false,
                                    dataType: "jsonp",
                                    jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
                                    jsonpCallback: "success",
                                    data: {
                                        key: "高德地图申请的ak",
                                        output: "json",
                                        coordtype: "wgs84ll",
                                        radius: "1000",
                                        location: loaction,
                                        extensions: "all",
                                    },
                                    dataType: "jsonp",
                                    success: function(res) {
                                        let data = res;
                                        if (data.status == 1) {
                                            let rest = data.regeocode;
                                            console.log('经度:' + longitudes, '纬度:' + latitudes, '省:' + rest.addressComponent.province, '市:' + Array.prototype.isPrototypeOf(rest.addressComponent.city) &&
                                                    rest.addressComponent.city.length === 0 ?
                                                    rest.addressComponent.province :
                                                    rest.addressComponent.city, '区县:' + rest.addressComponent.district)
                                                //这里注意一下,文档上描述的是如果是直辖市,市返回的是空 
                                        } else {//失败则调用百度地图 
                                            getBaiDu(latitudes, longitudes)
                                        }
                                    }.bind(this),
                                    error: function(res) {
                                        getBaiDu(latitudes, longitudes)

                                    },
                                });
                            };

                            function getBaiDu(latitudes, longitudes) { //百度获取gps
                                var loaction = latitudes + ',' + longitudes
                                $jQuery.ajax({
                                    url: "https://api.map.baidu.com/reverse_geocoding/v3/",
                                    type: "GET",
                                    cache: false,
                                    dataType: "jsonp",
                                    jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(默认为:callback)
                                    jsonpCallback: "success",
                                    data: {
                                        ak: "百度地图申请的ak",
                                        output: "json",
                                        coordtype: "wgs84ll",
                                        location: decodeURIComponent(loaction),
                                    },
                                    dataType: "jsonp",
                                    success: function(res) {
                                        let data = res;
                                        if (data.status == 0) {
                                            let res_data = data.result;
                                            console.log('经度:' + res_data.lng, '纬度:' + res_data.location.lat, '省:' + res_data.addressComponent.province, '市:' + res_data.addressComponent.city , '区县:' + res_data.addressComponent.district)
                                        } else {
                                            //失败
                                        }
                                    }.bind(this),
                                    error: function(res) {
                                        //失败
                                    },
                                });
                            }
                        },
                        function(error) {
                            if (error.code == 1) {
                                window.isError = '位置服务被拒绝'
                            } else if (error.code == 2) {
                                window.isError = '暂时获取不到位置信息'
                            } else if (error.code == 3) {
                                window.isError = '获取信息超时'
                            } else if (error.code == 4) {
                                window.isError = '未知错误'
                            }
                            //加载高德地图的时候一定要引入js
                             <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.0&key=你申请的key"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    这两段代码引入到html页面

                            //经纬度获取失败,加载高德地图获取
                            var map, geolocation;
                            //加载地图,调用浏览器定位服务
                            map = new AMap.Map("iCenter");
                            map.plugin("AMap.Geolocation", function() {
                                geolocation = new AMap.Geolocation({
                                    enableHighAccuracy: true, //是否使用高精度定位,默认:true
                                    timeout: 1000, //超过10秒后停止定位,默认:无穷大
                                    maximumAge: 0, //定位结果缓存0毫秒,默认:0
                                    convert: true, //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
                                    showButton: true, //显示定位按钮,默认:true
                                    buttonPosition: "LB", //定位按钮停靠位置,默认:'LB',左下角
                                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20)
                                    showMarker: true, //定位成功后在定位到的位置显示点标记,默认:true
                                    showCircle: true, //定位成功后用圆圈表示定位精度范围,默认:true
                                    panToLocation: true, //定位成功后将定位到的位置作为地图中心点,默认:true
                                    zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false
                                });
                                map.addControl(geolocation);
                                geolocation.getCurrentPosition();
                                AMap.event.addListener(geolocation, "complete", onComplete); //返回定位信息
                                AMap.event.addListener(geolocation, "error", onError); //返回定位出错信息
                            });
                            //解析定位结果
                            function onComplete(data) {
                                console.log('经度:' + data.position.lng, '纬度:' + data.position.lat, '省:' + data.addressComponent.province, '市:' +  (typeof data.addressComponent.city == "undefined" || data.addressComponent.city == null || data.addressComponent.city == "") ?
                                data.addressComponent.province :
                                data.addressComponent.city, '区县:' + data.addressComponent.district)
                            }
                            //解析定位错误信息
                            function onError(data) {

                            }
                        },
                        // {
                        //     //指示浏览器获取高精度的位置,默认false  
                        //     enableHighAcuracy: true,
                        //     //指定获取地理位置的超时时间,默认不限时,单位为毫秒  
                        //     // timeout: 5000,
                        //     //最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置  
                        //     maximumAge: 1000
                        // }
                    );
                }
            },

因为只获取了省市区,没有精细到街道,没试过街道准确,自行参考

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值