项目场景:
uniapp开发安卓app使用高德地图逆编码功能,我是uni.getLocation
默认定位,高德小程序(app,小程序都可以使用)](https://lbs.amap.com/api/wx/reference/core)
:https://restapi.amap.com/v3/geocode/regeo
,https://restapi.amap.comv3/weather/weatherInfo
来解析地址获取天气
问题描述
本地测试好好的打包后不能定位(uni.getocation失效)
uni.getLocation({
isHighAccuracy: true,
geocode: true,
type: 'gcj02',
success: res => {
latitude.value = res.latitude;
longitude.value = res.longitude;
markers.value = [
{
latitude: res.latitude,
longitude: res.longitude,
iconPath: '../../../static/images/position.png'
}
];
getProxyData(res.longitude, res.latitude);
},
fail(err) {
uni.hideLoading();
}
});
原因分析:
提示:这里填写问题的分析:
在反复测试后发现uni.getLocation根本不会调用fail,complete,success根本不会触发,有可能密钥错误
我这边比较特殊:uni.getLocation:高德APP密钥,v3/geocode/regeo:高德Web服务逆解析密钥
。
解决方案:
uniapp地图密钥填写高德App密钥
,地图逆解析的密钥填写web服务密钥
完整代码
<template>
<view class="map-body">
<view class="map"><map id="map" ref="map" :latitude="latitude" :longitude="longitude" :markers="markers" style="width: 100%;height: 100%;" @tap="choosePosi"></map></view>
<view class="btn p-16"><u-button type="primary" @click="submit">确定</u-button></view>
</view>
</template>
<script setup>
import request from '@/utils/request';
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { reactive, toRefs, ref, onMounted } from 'vue';
const state = reactive({
latitude: 0,
longitude: 0,
markers: []
});
const { latitude, longitude, markers } = toRefs(state);
onUnload(() => {
// 移除监听事件 优化性能
uni.$off('positionWeather');
});
onMounted(() => {
uni.showLoading({
title: '定位中...'
});
uni.getLocation({
isHighAccuracy: true,
geocode: true,
type: 'gcj02',
success: res => {
latitude.value = res.latitude;
longitude.value = res.longitude;
markers.value = [
{
latitude: res.latitude,
longitude: res.longitude,
iconPath: '../../../static/images/position.png'
}
];
getProxyData(res.longitude, res.latitude);
},
fail(err) {
uni.hideLoading();
}
});
});
function choosePosi(res) {
const { longitude: lng, latitude: lat } = res.detail;
latitude.value = lat;
longitude.value = lng;
markers.value = [
{
latitude: lat,
longitude: lng,
iconPath: '../../../static/images/position.png'
}
];
getProxyData(lng, lat);
}
function getProxyData(longitude, latitude) {
request({
url: '/map/v3/geocode/regeo',
data: {
location: longitude + ',' + latitude,
key: '5f3ecf19d5b08cbf168a9618e7bee10f',
radius: 10
},
method: 'GET',
sslVerify: false,
success: res2 => {
request({
url: '/map/v3/weather/weatherInfo',
data: {
city: res2.data.regeocode.addressComponent.adcode || '',
key: '5f3ecf19d5b08cbf168a9618e7bee10f'
},
method: 'GET',
success: res3 => {
if (res3.data.status === '1') {
const obj = {
longitude: longitude,
latitude: latitude,
address: res2.data.regeocode.formatted_address,
weather: res3.data.lives[0].weather,
temperature: res3.data.lives[0].temperature
};
uni.$emit('positionWeather', obj);
uni.$emit('mapdata', obj);
uni.hideLoading();
}
},
fail(err) {
uni.hideLoading();
}
});
},
fail: () => {
uni.hideLoading();
}
});
}
function submit() {
uni.navigateBack();
}
</script>
<style lang="scss" scoped>
.map-body {
width: 100vw;
height: 100vh;
position: relative;
.map {
width: 100%;
height: calc(100% - 110rpx);
}
.btn {
height: 110rpx;
}
}
</style>
技术不到家有错误,希望大佬指出!