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

最新推荐文章于 2025-05-28 22:07:59 发布

if时光重来

最新推荐文章于 2025-05-28 22:07:59 发布

阅读量2k

点赞数 25

CC 4.0 BY-SA版权

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/admin_web/article/details/143054427

uni-app 专栏收录该内容

13 篇文章

订阅专栏

本文中提到的问题出现原因：
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>