Applet WeChat - obtém a localização do usuário (latitude e longitude + cidade)
Diretório de artigos
1. Metas
Obtenha a cidade do usuário
2. Ideias de implementação
1. Use a função de interface do miniaplicativo WeChat para obter a latitude e longitude da localização do usuário
2. Analisar inversamente a latitude e a longitude em um endereço de texto estruturado
3. Extraia os componentes da estrutura de endereços necessários de acordo com o endereço de texto estruturado, como províncias, cidades, distritos e condados, etc.
3. Etapas de implementação
3.1 Funções de interface usadas
Applet WeChat - função de interface para obter a localização do usuário: wx.getLocation(Object object)
Você também precisa usar a configuração do applet: permission
Serviço de localização Tencent - função de interface de geocodificação reversa (descrição de localização de coordenadas): reverseGeocoder(options:Object)
3.2 Etapas específicas
3.2.1 Criar interface
arquivo wxml
<view class="view1">点击获取用户位置</view>
<view class="view2">用户所在位置的经度：{
{latitude}}</view>
<view class="view2">用户所在位置的纬度：{
{longitude}}</view>
<view class="view2">用户所在城市：{
{city}}</view>
arquivo wxss
.view1 {
background-color: yellow;
width: 100%;
height: 200rpx;
margin-bottom: 20rpx;
}
.view2 {
background-color: yellow;
width: 100%;
height: 100rpx;
margin-bottom: 20rpx;
}
arquivo js
// index.js
// 获取应用实例
const app = getApp()
Page({
data: {
latitude: null,
longitude: null,
city: null
},
onLoad() {
},
})
efeito de interface
3.2.2 Obtenha a latitude e longitude da localização do usuário
Escreva a função getLocation que aciona a aquisição da latitude e longitude da localização do usuário, chame a interface wx.getLocation na função, obtenha informações como longitude e latitude e, em seguida, vincule-as à interface front-end.
3.2.2.1 Configurar permissão no arquivo app.json
Quando o usuário usa esta função pela primeira vez, o applet pergunta ao usuário se deseja autorizar o acesso às informações de localização do usuário. Não pergunte novamente depois disso. (Após limpar o cache da ferramenta do desenvolvedor e recompilar o applet, ele perguntará novamente, pois as informações de autorização do usuário anterior foram apagadas)
arquivo 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 Chamar a interface wx.getLocation
arquivo wxml
//新增bindtap这个函数，使得用户点击这个view时就能触发获取用户位置的功能
<view class="view1" bindtap="getLocation">点击获取用户位置</view>
arquivo 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
})
}
})
}
})
Efeito
3.2.3 Obtenha a cidade do usuário
3.2.3.1 Configurações diferentes de applets
Solicite uma chave no serviço de localização da Tencent
Conclua as etapas a seguir de acordo com as instruções em [Getting Started and Usage Restrictions] em Tencent Location Services - WeChat Mini Program Javascript Development Guide .
Baixe o applet JavaScriptSDK
Basta baixá-lo do site do serviço de localização da Tencent (escolha um dos dois, baixei a v1.2) e salve-o no diretório do projeto do miniaplicativo WeChat.
Extraia o pacote compactado baixado para a pasta atual.
Configurações de nome de domínio de segurança
Faça login na plataforma pública do applet WeChat , use o appid deste applet (ou o número de teste de sua própria conta WeChat) para fazer login e configure o nome de domínio legal da solicitação no "nome de domínio do servidor": https://apis.map.qq.com.
3.2.3.2 Chamada interface reverseGeocoder
arquivo 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);
}
})
}
})
}
})
Efeito
referência
Applet Wechat para obter a localização atual e o nome da cidade