uniapp开发H5页面定位当前城市

一、安装并引入微信jsdk

// 1.在项目目录下执行以下安卓
npm install jweixin-module --save
// 2.在mian.js 内加入这两句
let jweixin = require('jweixin-module')  
Vue.prototype.wx = jweixin 

二、请求后台接口获取微信签名所需参数

getWxrz() {
                let urlStr = location.href.split('#')[0];//拿当前域名去后台获取签名
                //console.log('urlStr', urlStr)
                uni.request({
                    url: this.baseUrl + 'api/wechat/signature',
                    method: 'post',
                    header: {
                        sign: this.sign,
                        timestamp: this.timestamp,
                    },
                    data: {
                        url: urlStr
                        //url:  this.baseUrl
                    },
                    success: res => {
                        if (res.data.code == 0) {
                            this.wx.config({
                                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                                appId: res.data.data.appid, // 必填，公众号的唯一标识
                                timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
                                nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
                                signature: res.data.data.signature, // 必填，签名
                                jsApiList: [ // 可能需要用到的方法
                                    'getLocation',
                                ],
                            }) // 必填，需要使用的JS接口列表
                        }
                    }
                });
            },

三、获取当前经纬度坐标并转换成省市区

getLocation() {
                this.wx.ready(res => {
                    this.wx.getLocation({
                        success: function (res) {
                           //console.log('当前位置信息',res)
                           this.loAcquire(res.longitude,res.latitude)
                        },
                        cancel: function (res) {
                            //alert('用户拒绝授权获取地理位置');
                        }
                    });
                });
            },


//1.经纬度转换成省市区调用的是第三方sdk方法,在当前项目中会出现跨域,需要引入vue-jsonp来解决跨域   操作如下:
  npm install vue-jsonp --save
//2. main.js中添加
import { VueJsonp } from 'vue-jsonp' 
Vue.use(VueJsonp)
//3.直接调用this.$jsonp去请求第三方skd方法

        loAcquire(longitude,latitude){
                let that = this;
                uni.showLoading({
                    title: '加载中',
                    mask:true
                });
                let str =  `output=jsonp&key=EZSBZ-ICA66-6M4ST-MQHL7-OJ6VH-UIB5X&location=${latitude},${longitude}`;            
                this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
                  uni.hideLoading();
                  if(res.status == 0){
                     console.log(res.result.address_component)
                  }
                })
            },