1. Obtenga la clave del mapa de Tencent
1. Encuentra la API del mapa de Tencent
Después de registrarse e iniciar sesión, haga clic en Documentos de desarrollo y seleccione WeChat Mini Program JavaScript SDK
Después de ingresar, sigue los pasos en ¡Hola mundo!
2. Solicitar una llave
Haga clic en la clave de la aplicación en el primer paso anterior , ingrese mi aplicación, ingrese el nombre y el tipo de creación en la aplicación de creación
Después de que la creación sea exitosa, haga clic en Agregar clave para ingresar el nombre y la descripción, seleccione el subprograma WeChat, ingrese el APPID de su propio subprograma y haga clic en Aceptar.
En segundo lugar, la configuración en el applet
1. Si no hay una cuenta del Mini Programa
Regístrese en la dirección de registro del applet , busque la configuración de desarrollo en la gestión de desarrollo, habrá una ID de aplicación
Configuración de desarrollo -> "Nombre de dominio del servidor" establezca la solicitud de nombre de dominio legal, agregue https://apis.map.qq.com
3. Implementación del código
Descargar WeChat Mini Program JavaScriptSDK, WeChat Mini Program JavaScriptSDK v1.2
1. Crea un nuevo proyecto uniapp
Estructura de directorios, cree una nueva utilidad para importar los archivos en el JavaScriptSDK v1.2 descargado
2. Configuración en el proyecto
Durante el proceso de desarrollo, debe agregar la siguiente configuración en unpackage>>dist>>dev>>mp-weixin>>app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
Configure en la vista de origen de manifest.json: configure appid y ubicación geográfica
"mp-weixin": {
/* 小程序特有相关 */
"appid": "", //需要配置appid
"setting": {
"urlCheck": false
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
}
3. Código específico de la página
<template>
<view class="">
<view class="ditu">
<map style="width:100%;height:100%;"
:latitude="latitude"
:longitude="longitude"
:scale="scale"
:markers="marker"
@markertap="toMap()">
<!--此处踩坑问题1：
@markertap 是点击地图上的标记点时 触发打开地图。
@tap 是点击地图整体的时候 触发打开地图。
-->
</map>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 39.542, //纬度
longitude: 116.2529, //经度
scale: 14, //地图缩放程度
}
},
}
</script>
<style scoped>
.ditu {
width: 100%;
height: 565rpx;
}
</style>
4. El desarrollo se completa ~ como se muestra en la figura a continuación.
4. Obtenga la latitud y longitud de la ubicación actual
1. Código específico de la página
<template>
<view class="">
<view class="ditu">
<map style="width:100%;height:100%;" :latitude="latitude" :longitude="longitude" :scale="scale"
:markers="marker" @markertap="toMap()">
</map>
</view>
</view>
</template>
<script>
import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js";
export default {
data() {
return {
latitude: 39.542, //纬度
longitude: 116.2529, //经度
scale: 14, //地图缩放程度
}
},
methods: {
getLocation(){
const _this = this
uni.authorize({
scope: 'scope.userLocation',
success() {
let location = {
longitude: _this.longitude,
latitude: _this.latitude,
province: "",
city: "",
area: "",
street: "",
address: "",
};
uni.getLocation({
type: 'gcj02',
geocode: true,
success: function(res) {
uni.setStorageSync('latitude', _this.latitude)
uni.setStorageSync('longitude', _this.longitude)
location.longitude = res.longitude;
location.latitude = res.latitude;
const qqmapsdk = new QQMapWX({
key: 'PBZBZ-74CE3-7ND3P-3OVWM-HDZIT-QRF23' //申请的key
});
qqmapsdk.reverseGeocoder({
location,
success: function(res) {
let info = res.result;
location.province = info.address_component.province;
location.city = info.address_component.city;
location.area = info.address_component.district;
location.street = info.address_component.street;
location.address = info.address;
console.log(location);
},
});
},
fail: function(err) {
uni.showToast({
title: '获取定位失败',
icon: 'none'
})
}
})
}
})
},
},
onLoad() {
this.getLocation() //获取当前定位
},
}
</script>
<style scoped>
.ditu {
width: 100vw;
height: 565rpx;
}
</style>
2. Manejo de errores
Si lo ejecuta directamente, aparecerá el error en la figura a continuación.
**Motivo:** Desde julio de 2022, si un subprograma recientemente desarrollado desea obtener la información de ubicación del usuario, primero debe aplicarlo y luego configurarlo en app.json antes de que pueda usarse.
3. Permiso de aplicación
Solicitar permisos en las herramientas para desarrolladores de WeChat
Desarrollo -> Gestión de desarrollo -> Configuración de interfaz, y luego solicite la interfaz correspondiente según sus necesidades y si su applet tiene permiso para aplicar
4. Configuración de código
Actualmente, las interfaces que deben configurarse son las siguientes (consulte los documentos oficiales )
Simplemente configure el código en unpackage > dist > dev > mp-weixin > app.json en uniapp:
"requiredPrivateInfos": [
"getLocation",
"onLocationChange",
"startLocationUpdateBackground",
"chooseAddress"
]
Finalmente, la dirección de la ubicación se puede obtener
