uniapp使用高德地图定位,并显示,map报错getLocation:fail translate coordinate system fail,<AMap JSAPI> KEY异常

本文中提到的问题出现原因:
web服务的key:可以成功调用高德提供的api接口,但<map>显示会报错,
web端的key:接口请求不成功,原因是没有相应的服务功能;map可以正常使用

前往高德地图api官网申请key,地址:https://lbs.amap.com/

在这里插入图片描述
申请两个key,服务分别为:Web端,Web服务,这两个都要用到

完整代码
打开项目manifest.json文件,选择web配置,地图选择高德地图
这里配置绑定服务为Web端的key和秘钥
在这里插入图片描述

以下应用中配置的key为绑定服务= Web服务

<template>
    <view style="height: 100%">
        <block v-if="longitude">
            <map :longitude="longitude" :latitude="latitude" :markers="markers" style="width: 100%; height: 1036rpx" :show-location="true" scale="15"></map>
            
        </block>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            latitude: '',
            longitude: '',
            markers: [],
            address: '',
            hhid: '',
			taskid: ''
        };
    },

    onLoad: function (options) {
        var that = this;
        this.setData({
			hhid: options.hhid,
			taskid: options.taskid
		})
        uni.getLocation({
            type: 'wgs84',
            //返回可以用于wx.openLocation的经纬度
            success(res) {
				uni.showToast({
					title:"成功"
				})
				console.log('定位', res);
                var latitude = res.latitude;
                var longitude = res.longitude;
				that.$jsonp("https://restapi.amap.com/v3/geocode/regeo?parameters", {
					key: 'Web服务key',
					location: `${longitude},${latitude}`,
					output: "jsonp"
				}).then(res => {
					console.log('dingwei', res)
					that.markers = [
					    {
					        latitude: latitude,
					        longitude: longitude,
					        title: res.regeocode.formatted_address,
					        callout: {
					            content: res.regeocode.formatted_address,
					            display: 'ALWAYS',
					            bgColor: '#fff',
					            borderRadius: 6,
					            borderWidth: 10,
					            borderColor: '#fff'
					        }
					    }
					];
					console.log('当前定位', latitude, longitude);
					that.setData({
					    latitude: latitude,
					    longitude: longitude,
					    markers: that.markers,
					    address: res.regeocode.formatted_address
					});
				});
     
            },
			fail: function(err) {
				console.log('错误', err)
				uni.showToast({
					title:"错误" + JSON.stringify(err),
					duration: 10000
				})
			},
			complete: function(ee){
				console.log('回调', ee);
				
			}
        });
    },
    methods: {
        
    }
};
</script>

getLocation:fail translate coordinate system fail” 错误通常表示在进行坐标系统转换时失败,以下是可能的解决办法: ### 检查坐标系统参数 `uni.getLocation` 方法可以指定 `type` 参数来选择坐标系统,确保传入的 `type` 参数是正确且支持的。`type` 可选值有 `wgs84`(GPS 全球定位系统坐标)和 `gcj02`(国测局坐标)。示例代码如下: ```javascript uni.getLocation({ type: 'wgs84', // 或者 'gcj02' success: function (res) { console.log('当前位置的经度:' + res.longitude); console.log('当前位置的纬度:' + res.latitude); }, fail: function (err) { console.log('获取位置失败', err); } }); ``` ### 检查设备定位服务 确保设备的定位服务已经开启,不同的设备开启定位服务的方式可能不同: - **iOS 系统**:进入“设置” - “隐私” -定位服务”,开启相应应用的定位权限。 - **Android 系统**:进入“设置” - “位置信息”,开启位置服务,确保应用有定位权限。 ### 检查应用权限配置 在 `manifest.json` 中确保已经正确配置了定位权限。对于不同平台,配置方式有所不同: - **iOS 平台**:在 `manifest.json` 的 `app-plus` - `distribute` - `ios` 节点下添加 `NSLocationWhenInUseUsageDescription` 和 `NSLocationAlwaysAndWhenInUseUsageDescription` 字段,示例如下: ```json { "app-plus": { "distribute": { "ios": { "NSLocationWhenInUseUsageDescription": "应用需要使用您的位置信息", "NSLocationAlwaysAndWhenInUseUsageDescription": "应用需要持续使用您的位置信息" } } } } ``` - **Android 平台**:在 `manifest.json` 的 `app-plus` - `distribute` - `android` 节点下添加 `uses-permission` 字段,示例如下: ```json { "app-plus": { "distribute": { "android": { "uses-permission": [ "android.permission.ACCESS_FINE_LOCATION", "android.permission.ACCESS_COARSE_LOCATION" ] } } } } ``` ### 检查网络连接 定位功能有时依赖网络来获取更准确的位置信息,确保设备的网络连接正常。可以尝试切换不同的网络环境(如 Wi-Fi 或移动数据)来测试。 ### 检查设备兼容性 某些设备可能由于硬件或系统问题导致定位失败。可以在不同的设备上进行测试,如果只有特定设备出现问题,可能需要联系设备厂商或进行设备系统更新。 ### 检查运行环境 确保应用运行的环境(如开发工具、真机调试等)是正常的。可以尝试重新启动开发工具或设备,清除缓存后再次测试。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值