小程序uniapp获取经纬度、地址

// 由于这里进行了一些api的封装，可参考代码
// https://www.jianshu.com/p/80e33d16182f

//引用的一些方法放下面了，我一般都是封装到单独的js文件引进来

//GetAddress.js 引入使用放在最底部

//一、这里是获取经纬度（包括调取用户设置，对用户设置的判断）
export default async function wxGetLocation() {
   try {
       //小程序获取地理位置
       let result = await getLocationApi({})
       return result
   } catch (err) {
       let scope = 'scope.userLocation'
       let setting = await wxGetSetting() //获取用户的当前设置
       if (!setting[scope]) {
           let result = await showModalApi({
               content: '您拒绝了定位权限，将无法正常使用此功能',
               confirmText: '去开启'
           })
           if (result.confirm) {
               let auth = await wxOpenSetting()
               if (auth.authSetting[scope]) {
                   let result = await getLocationApi({})
                   return result
               }
               showToastApi({
                   title: '您拒绝了定位权限'
               })
               return false
           }
           return false
       }
   }
}

//二、这里把经纬度转成地址

import {//返回非经纬度地址
   AMAPKEY
} from "@/common/config.js"
const amapFile = require('./amap-wx.130.js') //这里引入高德地图
const myAmapFun = new amapFile.AMapWX({
   key: AMAPKEY
});
export default function wxGetAddress({
   longitude,
   latitude
}) {
   return new Promise((resolve, reject) => {
       myAmapFun.getRegeo({
           location: `${longitude},${latitude}`,
           success: (res) => {
               resolve(res[0])
           },
           fail: (err) => {
               resolve(null)
           }
       })
   })
}

function wxGetSetting() {//获取用户的当前设置
   return new Promise((resovle, reject) => {
       uni.getSetting({
           success: (res) => {
               resovle(res.authSetting)
           },
           fail: (err) => {
               reject(err)
           }
       })
   })
}

function wxOpenSetting() {//调起客户端小程序设置界面，返回用户设置的操作结果。
   return new Promise((resovle, reject) => {
       uni.openSetting({
           success: (res) => {
               resovle(res)
           }
       })
   })
}

function getLocationApi({//获取用户经纬度
   type = 'gcj02',
   altitude = false,
   geocode = false,
   isHighAccuracy = false
}) {
   return new Promise((resovle, reject) => {
       uni.getLocation({
           type,//返回坐标形式
           altitude,//传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
           geocode,//默认false，是否解析地址信息
           isHighAccuracy,//开启高精度定位
           success: res => {
               resovle(res)
           },
           fail: (err) => {
               reject(err)
           }
       });
   })
}

function showModalApi({//消息提示框操作框
   title = '提示', //   String   否   提示的标题
   content = 'content', //   String   否   提示的内容
   showCancel = true, //   Boolean   否   是否显示取消按钮，默认为 true
   cancelText = '取消', //   String   否   取消按钮的文字，默认为"取消"
   cancelColor = '#000000', //   HexColor   否   取消按钮的文字颜色，默认为"#000000"   H5、微信小程序、百度小程序
   confirmText = '确定', //   String   否   确定按钮的文字，默认为"确定"
   confirmColor = '#576B95', //HexColor 否确定按钮的文字颜色
   editable = false, //   Boolean   否   是否显示输入框   H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)
   placeholderText = '', //   String   否   显示输入框时的提示文本   H5 (3.2.10+)、App (3.2.10+)、微信小程序 (2.17.1+)
}) {
   return new Promise((resovle, reject) => {
       uni.showModal({
           title,
           content,
           showCancel,
           cancelText,
           cancelColor,
           confirmText,
           confirmColor,
           editable,
           placeholderText,
           success: (res) => {
               resovle(res)
           },
           fail: (err) => {
               reject(err);
           }
       });
   })
}

function showToastApi({//消息提示框
   title = 'message', //String   是   提示的内容，长度与 icon 取值有关。
   icon = 'none', //   String   否   图标，有效值详见下方说明。
   image = '', //   String   否   自定义图标的本地路径（app端暂不支持gif）   App、H5、微信小程序、百度小程序
   mask = false, //   Boolean   否   是否显示透明蒙层，防止触摸穿透，默认：false   App、微信小程序
   duration = 1500, //Number   否   提示的延迟时间，单位毫秒，默认：1500
   position = 'center', //   String   否   纯文本轻提示显示位置，填写有效值后只有 title 属性生效，有效值详见下方说明。   App

}) {
   uni.showToast({
       title,
       icon,
       image,
       mask,
       duration,
       position,
       success: (res) => {
           envlog({
               msg: res
           })
       },
       fail: (err) => {
           envlog({
               msg: err
           })
       }
   });
}

//三、使用GetAddress.js获取地址和经纬度

//test.vue

import { wxGetLocation, wxGetAddress } from './GetAddress.js';

data() {
       return {
           address: '',
           longitude:'',
           latitude:'',
       };
   },

async onLoad() {//获取地址，并进行地址编码
       let result = await wxGetLocation();
       if (result) {
           this.longitude=result.longitude//经度
           this.latitude=result.latitude//纬度
           let address = await wxGetAddress({ longitude: result.longitude, latitude: result.latitude });
           this.address = `${address.name || ''}${address.desc || ''}`;//地址
       }
   },

小程序uniapp获取经纬度、地址相关推荐

微信小程序之获取用户地址
在微信小程序中获取定位信息今天一整天基本上都在处理在微信小程序中获取准确地址,给出定位并给出所在城市的问题.经过走了半天弯路,现在总结一下所需要的步骤. 一. 先到腾讯位置服务中心获取KEY 通过小 ...
微信小程序如何获取手机地址定位
微信小程序如何获取手机地址定位微信小程序中,经常需要获取地址定位. 微信小程序中如何获取地址定位. wx.getLocation({success: function (res) {console. ...
微信小程序地图获取经纬度并获取经纬度的地址信息
在需要添加地图的html页面 <map id="map" longitude="{{longitude}}" latitude="{{latit ...
uni-app开发微信小程序之获取当前地址
<script>import amapFile from '../../common/amap-wx.js'export default {data() {return {key: 'ea ...
微信小程序定位获取经纬度城市街道等位置信息
看文章扫一扫领红包哦请先看微信小程序关于定位的API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/location.html#wxgetlocat ...
微信小程序（小程序定位获取地址信息篇）
微信小程序(小程序定位获取地址信息篇) 程序思路:1.小程序获取用户定位信息(经纬度)2.引入腾讯地图SDK ,将经纬度传入逆向定位方法 3.[SDK下载地址](https://mapapi.qq.c ...
uni-app小程序如何获取视频时长
uni-app小程序如何获取视频时长从网上搜寻了一下发现都没有单纯获取视频时长的方法,于是只能自己研究一下了 uni-app和小程序都提供了video组件,却发现并没有提供获取视频时长属性或方法, ...
小程序获取城市行政区号_小程序中通过经纬度如何获取所在省市区名字（腾讯地图JavaScript SDK）...
在小程序中通过经纬度来获取所在省市区名字,这个功能还是挺有意思的,小程序中竟然不直接返回所在省市区,只提供经纬度,还需要腾讯地图来获取,还是有点小坑的,不注意的话很容易出问题.废话不多说,请看下文. ...
uniapp 微信小程序 getPhoneNumber 获取手机号提示 appid没有权限
appid没有权限问题出现原因,当前小程序账号没有进行"微信认证" 登录微信小程序后台,可以查看到当前小程序的基本信息. 微信小程序授权获取手机号接口因为需要用户主动触发才能发 ...

小程序uniapp获取经纬度、地址

小程序uniapp获取经纬度、地址相关推荐

最新文章

热门文章