uniapp 获取定位以及经纬度转换为城市名

/*2021/8/26xh获取地理位置经纬度及城市名(h5,app,微信小程序三端)*/
// #ifdef H5
//引入jquery文件，用jquery的jsonp来访问腾讯地图的逆地址解析，只适用于h5和pc
import $ from './jquery-3.0.0.min.js'
// #endif
// #ifdef MP-WEIXIN
//腾讯地图的逆地址解析,下载地址：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
import QQMapWX  from './qqmap-wx-jssdk.js'
// #endif//获取位置信息
export const getLocation = function(){return new Promise((rel,rej)=>{// #ifdef H5uni.getLocation({type:'gcj02',success:async (res)=>{/* console.log('当前位置的经度：' + res.longitude);console.log('当前位置的纬度：' + res.latitude); */var city = await getH5MapCity(res.latitude,res.longitude);let obj = {name:city,jing:res.longitude,wei:res.latitude}console.log('H5')if(city !== false){rel(obj);}else{rej('获取失败');}},fail(res){rej('获取失败');uni.showToast({title:'位置获取失败',icon:'none',duration:2000})}})/* // 腾讯地图Apiconst qqmapsdk = new QQMapWX({ key: "xxxxxxx" });uni.getLocation({type:'gcj02',success(res){qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success(e) {let obj = {name:e.result.ad_info.city,jing:res.longitude,wei:res.latitude}if(e.result.ad_info.city){rel(obj);}else{rej('获取失败');}console.log(e);},fail(res){rej('获取失败');uni.showToast({title:'位置获取失败',icon:'none',duration:2000})}})}}) */// #endif//app位置获取// #ifdef APP-PLUSuni.getLocation({type:'gcj02',geocode:true,success(res){console.log(res)let obj = {name:res.address.city,jing:res.longitude,wei:res.latitude}console.log('APP')if(res.address.city){rel(obj);}else{rej('获取失败');}},fail(res){rej('获取失败');uni.showToast({title:'位置获取失败',icon:'none',duration:2000})}})// #endif//微信小程序// #ifdef MP-WEIXIN// 获取授权信息uni.getSetting({success: res => {if (res.authSetting && res.authSetting.hasOwnProperty("scope.userLocation")) {if (res.authSetting["scope.userLocation"]) {getCityInfo();} else {uni.showModal({title: "提示",content: "请重新授权获取你的地理位置，否则部分功能将无法使用",success: (res) => {if (res.confirm) {uni.openSetting({success: () => getCityInfo()});} else {rej('获取失败');uni.showToast({title:'请授权获取你的地理位置，否则部分功能将无法使用！',icon:'none',duration:2000})}},fail(res){rej('获取失败');uni.showToast({title:'位置获取失败',icon:'none',duration:2000})}});}} else {getCityInfo();}}})// 获取地理位置信息const getCityInfo = () => {// 腾讯地图Apiconst qqmapsdk = new QQMapWX({ key: "xxxxxxxxxxxx" });// 授权uni.authorize({scope: "scope.userLocation",success: () => {uni.getLocation({type: "gcj02", //  wgs84: 返回GPS坐标，gcj02: 返回国测局坐标success: res => {qqmapsdk.reverseGeocoder({location: {latitude: res.latitude,longitude: res.longitude},success(e) {let obj = {name:e.result.ad_info.city,jing:res.longitude,wei:res.latitude}if(e.result.ad_info.city){rel(obj);}else{rej('获取失败');uni.showToast({title:'位置获取失败',icon:'none',duration:2000})}console.log(e);},fail(res){rej('获取失败');uni.showToast({title:'位置获取失败',icon:'none',duration:2000})}});}});},fail(res){rej('获取失败');uni.showToast({title:'请授权获取你的位置，否则部分功能将无法使用！',icon:'none',duration:2000})}})}// #endif})
}// h5腾讯地图逆解析(将经纬度转成城市名)
function getH5MapCity(latitude, longitude){return new Promise((rel,rej)=>{var url = 'https://apis.map.qq.com/ws/geocoder/v1/?';//腾讯地图经纬度转城市名的链接var data ={key:'xxxxxxxxx',//腾讯地图密钥output:'jsonp',location:latitude+','+longitude //经纬度}//用jquery的jsonp来解决跨域问题$.ajax({type:'get',dataType:'jsonp',data,jsonp:"callback",url,success(res){var cityName = res.result.address_component.city;console.log(res);rel(cityName);},error(res){uni.showToast({title:'位置获取失败',icon:'none',duration:2000})rej(false);}})})
}

jsonp插件来解决跨域，实现逆解析

下载 vue-jsonp 插件

main.js

import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp);//用jsonp来解决腾讯地图逆解析跨域问题

页面

//腾讯地图逆解析，解决跨域
getUserLocation(e) {const that = this;let locationObj = e.latitude + ',' + e.longitude;let url = 'https://apis.map.qq.com/ws/geocoder/v1/?';this.$jsonp(url, {key:that.$key,//腾讯地图密钥output:'jsonp',location:e.latitude+','+e.longitude //经纬度}).then(res => {console.log(res)}).catch(err => {uni.showToast({title:'解析失败',icon:'none'})});},

uniapp 获取定位以及经纬度转换为城市名相关推荐

uniapp 获取定位（经纬度）并且用腾讯地图api解析省市区门牌号
1.首先去腾讯地图申请必要的key https://lbs.qq.com/ 根据项目需求勾选不同的方案,我写的是h5,如下 2.在项目中配置你的key 3.接下来就是代码了必须引入腾讯的api,地址 ...
获取天气预报ajax,Ajax 通过城市名获取数据(全国天气预报API)
预览图(比较简单粗糙) 聚合数据全国天气预报接口: 接口地址:http://v.juhe.cn/weather/index 支持格式:json/xml 请求方式:get 请求示例:http://v.j ...
uni-app获取位置信息(经纬度转换地址信息)
uniapp获取位置信息,获取到的信息为经纬度,再通过转换成地址信息 1.使用uni.getLocation()获取位置信息 2.下载qqmap-wx-jssdk.js插件插件下载地址 3.使用腾讯位 ...
百度api通过经纬度转换为城市名称
//经纬度转城市名称(返回城市id,城市名称) //$ak百度开发密钥,$lat纬度,$lng经度,$type返回数据类型 public function getCityName($ak,$lat,$ ...
百度地图之地图显示和定位，获取定位的经纬度
在百度地图api开放平台,把demo下载把第三方的包粘贴到自己项目的libs包下(android-support-v4.jar这个包不要粘) 在百度开发平台创建项目,输入项目名, 从cmd中获取sh ...
uni-app 获取视频第一帧转换为图片并展示
话不多说,直接上代码 <template><view class="content"><image v-if="demo != ''&quo ...
Swift 使用CoreLocation获取定位与位置信息
大多数情况下APP会在开启应用的时候获取当前的位置,所以我写在APPDelegate里第一步 import CoreLocationvar locationManager = CLLocationM ...
vue 微信公众号获取定位经纬度腾讯地图逆地址解析为具体地址
最近做项目需要用到微信公众号获取定位,并将定位转换为具体地址的需求,找了挺多,最后整理下,分享给大家~ 我这里使用的是腾讯地图,也可以使用其他的如百度.高德等. 思路是,先使用微信开放文档的获取定位 ...
根据ip地址获取城市名的几种方法
2019独角兽企业重金招聘Python工程师标准>>> 在某些场景下,可能需要用到根据ip地址获取ip所对应的城市名. 貌似腾讯.百度等开放接口已经失效或者免费服务接口关闭等原因,很 ...

uniapp 获取定位以及经纬度转换为城市名

uniapp 获取定位以及经纬度转换为城市名相关推荐

最新文章

热门文章