Subprograma WeChat: obtenga la ubicación del usuario (latitud y longitud + ciudad)
Directorio de artículos
- Subprograma WeChat: obtenga la ubicación del usuario (latitud y longitud + ciudad)
1. Metas
Obtener la ciudad del usuario
2. Ideas de implementación
1. Use la función de interfaz del subprograma WeChat para obtener la latitud y longitud de la ubicación del usuario
2. Analice inversamente la latitud y la longitud en una dirección de texto estructurado
3. Extraiga los componentes de la estructura de dirección requeridos de acuerdo con la dirección de texto estructurado, como provincias, ciudades, distritos y condados, etc.
3. Pasos de implementación
3.1 Funciones de interfaz utilizadas
Applet de WeChat: función de interfaz para obtener la ubicación del usuario: wx.getLocation (objeto de objeto)
También necesita usar la configuración del applet: permiso
Servicio de ubicación de Tencent: función de interfaz de geocodificación inversa (descripción de ubicación coordinada): reverseGeocoder (opciones: Objeto)
3.2 Pasos específicos
3.2.1 Crear interfaz
archivo wxml
<view class="view1">点击获取用户位置</view>
<view class="view2">用户所在位置的经度：{
{latitude}}</view>
<view class="view2">用户所在位置的纬度：{
{longitude}}</view>
<view class="view2">用户所在城市：{
{city}}</view>
archivo wxss
.view1 {
background-color: yellow;
width: 100%;
height: 200rpx;
margin-bottom: 20rpx;
}
.view2 {
background-color: yellow;
width: 100%;
height: 100rpx;
margin-bottom: 20rpx;
}
archivo js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
})
efecto de interfaz
3.2.2 Obtener la latitud y longitud de la ubicación del usuario
Escriba la función getLocation que activa la adquisición de la latitud y la longitud de la ubicación del usuario, llame a la interfaz wx.getLocation en la función, obtenga información como la longitud y la latitud y luego vincúlela a la interfaz de usuario.
3.2.2.1 Configurar permiso en el archivo app.json
Cuando el usuario utiliza esta función por primera vez, el subprograma le pregunta si desea autorizar el acceso a la información de ubicación del usuario. No vuelvas a preguntar después de eso. (Después de borrar la memoria caché de las herramientas de desarrollo y volver a compilar el applet, volverá a preguntar porque se ha borrado la información de autorización del usuario anterior)
archivo app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
//新增下面的代码（上面的代码是创建小程序项目后就已经有的）
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
3.2.2.2 Llamar a la interfaz wx.getLocation
archivo wxml
//新增bindtap这个函数，使得用户点击这个view时就能触发获取用户位置的功能
<view class="view1" bindtap="getLocation">点击获取用户位置</view>
archivo js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
// 新增下面这部分代码
getLocation() {
var that = this;
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
console.log(res) //将获取到的经纬度信息输出到控制台以便检查
that.setData({
//将获取到的经度、纬度数值分别赋值给本地变量
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
})
Efecto
3.2.3 Obtener la ciudad del usuario
3.2.3.1 Configuraciones que no sean applets
Solicitar una clave en el servicio de ubicación de Tencent
Complete los siguientes pasos de acuerdo con las instrucciones en [Primeros pasos y restricciones de uso] en Tencent Location Services - WeChat Mini Program Javascript Development Guide .
Descargar subprograma JavaScriptSDK
Simplemente descárguelo del sitio web del servicio de ubicación de Tencent (elija uno de los dos, descargué v1.2) y guárdelo en el directorio del proyecto del subprograma WeChat.
Extraiga el paquete comprimido descargado a la carpeta actual.
Configuración de nombre de dominio de seguridad
Inicie sesión en la plataforma pública del subprograma WeChat , use la aplicación de este subprograma (o el número de prueba de su propia cuenta de WeChat) para iniciar sesión y configure el nombre de dominio legal de la solicitud en el "nombre de dominio del servidor": https://apis.map.qq.com.
3.2.3.2 Llamar a la interfaz reverseGeocoder
archivo js
// index.js
// 获取应用实例
const app = getApp()
//新增
// 引入SDK核心类，根据自己放的路径来写这个SDK核心类的位置
var QQMapWX = require('../../qqmap-wx-jssdk.js');
//新增
// 实例化API核心类
var qqmapsdk = new QQMapWX({
key: '……' // 必填，填自己在腾讯位置服务申请的key
});
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
getLocation() {
var that = this;
wx.getLocation({
type: 'wgs84',
success (res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
console.log(res)
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
//新增
qqmapsdk.reverseGeocoder({
//位置坐标，默认获取当前位置，非必须参数
//Object格式
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: function(res) {
//成功后的回调
console.log(res.result.ad_info.city);
that.setData({
city: res.result.ad_info.city
})
},
fail: function(error) {
console.error(error);
},
complete: function(res) {
console.log(res);
}
})
}
})
}
})
Efecto
referencia
Applet de Wechat para obtener la ubicación actual y el nombre de la ciudad