项目场景:

uniapp开发安卓app使用高德地图逆编码功能,我是uni.getLocation默认定位,高德小程序(app,小程序都可以使用)](https://lbs.amap.com/api/wx/reference/core):https://restapi.amap.com/v3/geocode/regeohttps://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根本不会触发,有可能密钥错误

在这里插入图片描述
我这边默认定位是高德地图App
在这里插入图片描述
我这边比较特殊: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>

技术不到家有错误,希望大佬指出!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐