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

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐