微信小程序获取当前位置和城市名

=========================================================================

1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting;

2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数);

3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家,省,市,区,经纬度等地理位置)

步骤描述清楚以后,下面就开始按步骤操作了;(本文仅仅讲述如何获取用户地理位置的授权)

图示为获取用户地理位置授权弹窗

在这里插入图片描述

在用户首次进入某页面(需要地理位置授权)时候,在页面进行onLoad,onShow时候,进行调用wx.getLocation要求用户进行授权;以后每次进入该页面时,通过wx.getSetting接口,返回用户授权具体信息。

wx.getSetting接口具体API地址链接为点击打开链接

在这里插入图片描述

上图中scope.userLocation就是地理授权的标志;

当该标志是underfind,表示用户初次进入该页面,当该标志是false,表示用户初次进入该页面拒绝了地理授权,应进行重新要求获取授权。

wx.getSetting({

success: (res) => {

console.log(JSON.stringify(res))

// res.authSetting[‘scope.userLocation’] == undefined 表示 初始化进入该页面

// res.authSetting[‘scope.userLocation’] == false 表示 非初始化进入该页面,且未授权

// res.authSetting[‘scope.userLocation’] == true 表示 地理位置授权

if (res.authSetting[‘scope.userLocation’] != undefined && res.authSetting[‘scope.userLocation’] != true) {

wx.showModal({

title: ‘请求授权当前位置’,

content: ‘需要获取您的地理位置,请确认授权’,

success: function (res) {

if (res.cancel) {

wx.showToast({

title: ‘拒绝授权’,

icon: ‘none’,

duration: 1000

})

} else if (res.confirm) {

wx.openSetting({

success: function (dataAu) {

if (dataAu.authSetting[“scope.userLocation”] == true) {

wx.showToast({

title: ‘授权成功’,

icon: ‘success’,

duration: 1000

})

//再次授权,调用wx.getLocation的API

} else {

wx.showToast({

title: ‘授权失败’,

icon: ‘none’,

duration: 1000

})

}

}

})

}

}

})

} else if (res.authSetting[‘scope.userLocation’] == undefined) {

//调用wx.getLocation的API

}

else {

//调用wx.getLocation的API

}

}

})

在拿到用户授权以后,使用微信的API获取当前位置的经纬度链接: 微信获取位置API

在这里插入图片描述

腾讯地图API

======================================================================

简介

腾讯位置服务为微信小程序提供了基础的标点能力、线和圆的绘制接口等地图组件和位置展示、地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品。 在此基础上,腾讯位置服务微信小程序JavaScript SDK是专为小程序开发者提供的LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据服务,让您的小程序更强大

Hello world!

1、申请开发者密钥(key): 申请密钥

2、开通webserviceAPI服务:控制台 ->应用管理 -> 我的应用->添加key-> 勾选WebServiceAPI -> 保存

3、(小程序SDK需要用到webserviceAPI的部分服务,所以使用该功能的KEY需要具备相应的权限)

4、下载微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.1 JavaScriptSDK v1.2

5、安全域名设置,在小程序管理后台 -> 开发 -> 开发管理 -> 开发设置 -> “服务器域名” 中设置request合法域名,添加https://apis.map.qq.com

小程序示例

// 引入SDK核心类,js文件根据自己业务,位置可自行放置

var QQMapWX = require(‘…/…/libs/qqmap-wx-jssdk.js’);

var qqmapsdk;

Page({

onLoad: function () {

// 实例化API核心类

qqmapsdk = new QQMapWX({

key: ‘申请的key’

});

},

onShow: function () {

// 调用接口

qqmapsdk.search({

keyword: ‘酒店’,

success: function (res) {

console.log(res);

### 微信小程序获取当前位置坐标并调用天气 API 的实现 #### 实现概述 在微信小程序中,可以通过 `wx.getLocation` 接口获取用户的经纬度信息[^1]。随后利用这些经纬度数据通过第三方天气服务提供商(如腾讯云、阿里云或其他开放平台)提供的天气 API 查询对应地区的实时天气情况。 以下是具体的技术细节代码示例: --- #### 获取用户地理位置的实现方法 使用 `wx.getLocation` 方法来获取用户的地理坐标(纬度经度)。此接口返回的数据可以直接用于后续的地图定位或者逆向解析为具体的地址称[^3]。 ```javascript // app.js 或者 page.js 中定义的方法 getLocation() { wx.getLocation({ type: 'gcj02', // 返回可以用于微信内置地图的坐标 success(res) { const latitude = res.latitude; const longitude = res.longitude; console.log('Latitude:', latitude, ', Longitude:', longitude); // 将经纬度传递给其他函数处理 getWeatherByLocation(latitude, longitude); }, fail(err) { console.error('Failed to get location:', err); } }); } ``` 上述代码片段展示了如何通过 `wx.getLocation` 来捕获用户的 GPS 数据,并将其作为输入参数传入到另一个自定义函数 `getWeatherByLocation()` 中进一步操作。 --- #### 使用逆地理编码将经纬度转为实际地址 如果希望展示更友好的界面提示,则还需要把原始的经纬度转化为人类可理解的城市或街道级描述[^2]。这一步通常依赖于高德地图、百度地图或者其他支持此类功能的服务商所提供的 RESTful Web Service 完成转换过程。 下面是一个简单的例子演示怎样发送 HTTP 请求至某特定服务商完成这一任务: ```javascript reverseGeocode(lat, lng){ let url = `https://restapi.amap.com/v3/geocode/regeo?key=YOUR_API_KEY&location=${lng},${lat}`; wx.request({ url:url, method:'GET', header:{'content-type':'application/json'}, success:function(responseData){ var addressComponent=responseData.data.regeocode.addressComponent; console.log(`Current Position:${addressComponent.province}-${addressComponent.city}-${addressComponent.district}`); }, error:function(errorInfo){ console.warn("Error occurred during reverse geocoding",errorInfo); } }); } ``` 注意替换其中占位符 YOUR_API_KEY 成为你自己的开发者密钥才能正常使用该服务。 --- #### 调用天气预报 API 并显示结果 最后一步就是联系外部气象服务平台请求最新的气候状况更新。这里假设采用的是一个假想的支持 JSONP 格式的公共端点为例说明整个流程逻辑如下所示 : ```javascript function getWeatherByLocation(lat, lon){ const weatherUrl=`http://t.weather.sojson.com/api/weather/city/101010100?latitude=${lat}&longitude=${lon}`; wx.request({ url :weatherUrl , data :{} , header:{ "Content-Type":"application/x-www-form-urlencoded" }, success :(res)=>{ if (res.statusCode===200 && !res.errMsg ){ displayWeatherDetails(res.result.today.wea,res.result.temperature.now.tempC ); }else{ alertUserFailureToFetchWeather(); } }, failure:(err)=>{console.debug(err);} }) } displayWeatherDetails=(condition,temp)=>{ document.getElementById("currentCondition").innerText="Today's Condition:"+ condition ; document.getElementById("temperatureValue").innerText="Temperature is "+ temp +"° Celsius"; } alertUserFailureToFetchWeather=()=>{ wx.showToast({title:"Unable To Fetch Weather Data!",icon:"none"}); } ``` 以上脚本段落解释了当成功接收到服务器响应包之后应该采取哪些行动步骤去渲染 UI 组件上的文字标签内容;同时也包含了错误情形下的反馈机制设计思路供参考学习之用。 --- ### 注意事项 - **权限声明**: 需要在项目的 manifest 文件里添加必要的隐私政策同意条款告知最终使用者会收集其所在区域的相关资料以便提供更好的用户体验效果。 - **频率限制**: 大部分在线资源都有严格的访问次数上限规定,请务必查阅官方文档了解清楚后再合理安排好程序架构布局以免超出限额遭到封禁处罚风险。 - **安全性考量**: 对敏感个人信息做好加密保护措施防止泄露出去造成不必要的麻烦纠纷等问题发生几率最小化为目标努力前行不断优化改进现有解决方案直至达到理想状态为止! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值