uniapp使用腾讯地图小结

使用场景：

通过uniapp搭建的微信小程序

功能需求：

自提服务，需要获取用户的当前地理位置信息像后端发送请求，来获取附近自提点数据。用户可以根据当前自定定位来获取附近自提点，或者通过选择省市区来获取选择位置附近的自提点。

实现思路：

先在微信公众平台申请权限接口：getLocation（不然打开微信小程序会报错提示你没权限，具体要不要申请权限看项目类型,详见：地理位置接口新增与相关流程调整 | 微信开放社区 (qq.com)）

uni.getLocation或者wx.getLocation获取到当前的经纬度，但是！由于我们这边的需求，所以我需要向后端传经纬度以及对应的省市区的code，那就需要用到腾讯地图的逆转换了。

之后我们需要下载一个腾讯地图的js文件，放在我们的项目目录utils中，引入到当前页面

（我就不整网盘下载了，直接给代码复制出来你们复制粘贴吧，压缩：qqmap-wx-jssdk.min.js_木之本樱~的博客-CSDN博客，不压缩：qqmap-wx-jssdk.js_木之本樱~的博客-CSDN博客）

var QQMapWX = require('../../utils/qqmap-wx-jssdk.min');
var qqmapsdk;

自己的key秘钥 http://lbs.qq.com/console/mykey.html 在这个网址申请

onLoad: function() {
            // 这里写你自己的秘钥
            qqmapsdk = new QQMapWX({
                key: 'TBCBZ-LMB6R-BEYWO-WHN33-QFAZ5-7BBE6' 
            });
        },

接下来就是在事件中将经纬度逆转换，省市区的code是有规律的，比如：

省：ss 00 00

市：ss cc 00

区： ss cc qq

（加空格是为了让大家更好理解，实际code并无空格）

            // 获取当前地理位置:通过经纬度获得code
            getLocal: function() {
                let that = this;
                qqmapsdk.reverseGeocoder({
                    location: {
                        latitude: that.latitude,
                        longitude: that.longitude
                    },
                    success: function(res) {
                        //这里只能获取到区的code，但是我们可以自行切割并拼接获取到省市的code
                        let countyCode = res.result.ad_info.adcode
                        that.selectCity.provinceCode = countyCode.toString().substring(0, 2) + '0000'; //省份
                        that.selectCity.cityCode = countyCode.toString().substring(0, 4) + '00'; //城市
                        that.selectCity.countyCode = countyCode; //区县
                        that.selectSelfAddressList(); //获取附近自提点
                    },
                    fail: function(res) {
                        console.log(res);
                    },
                    complete: function(res) {
                        console.log(res);
                    }
                });
            },

本来到这里就可以结束了，可惜~~~还有手动选择省市区来获取附近自提点，这次需要通过省市区的名字或code来获取对应的经纬度了，没关系，我们接着继续。

            // 通过省市区地址获得经纬度
            getLatitude() {
                //调用地址解析接口
                let that = this;
                qqmapsdk.geocoder({
                    //获取表单传入地址
                    address: '浙江省杭州市西湖区', //这里写的是地址  地址参数，例：固定地址，address: '北京市海淀区彩和坊路海淀西大街74号'或者'北京北京市海淀区'
                    success: res => { //成功后的回调
                        that.selfLatLng = { 
                            longitude: res.result.location.lng, //经度
                            latitude: res.result.location.lat, //纬度
                        },
                    },
                    fail: function(error) {
                        console.log(error);
                    },
                    complete: function(res) {
                        console.log(res);
                    }
                })
            },

暂时就这么多吧，后期补充咯（只是口嗨啦，不一定会继续补充哦~~下班儿~）

uniapp使用腾讯地图小结

猜你喜欢