解决uni-app map地图显示图标markers问题（初学记录）

在uni-app中引入地图需要提前在腾讯地图或者高德地图申请API，网上有很多教程

uni-app官网给出的例程：map | uni-app官网

官网代码：

<template>
	<view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 39.909,
			longitude: 116.39742,
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 39.90,
				longitude: 116.39,
				iconPath: '../../../static/location.png'
			}]
		}
	},
	methods: {

	}
}
</script>

官网给出的效果：

然而我按照官网的步骤写了之后只有地图没有图标

没改之前的代码：（我这里的经纬度是从云端传过来的）

<view>
			<map :scale="scale" style="width: 680rpx; height: 520rpx;" :latitude="latitude" :longitude="longitude"
				:markers="covers"></map>
		</view>

data() {
			return {
				scale: 20, // 地图缩放级别  
				id: 0,
				latitude: '',
				longitude: '',
				token: '',

				covers: [{
					latitude: '',
					longitude: '',
					iconPath: '../../../static/location.png'
				}]
			}
		},

在网上看了别人的案例之后，主要是由于下面几个问题：

1.路径问题

引入的自定义图片路径必须是绝对路径（/static），不能是相对路径（…/static）

2.图片格式问题

如果是（.svg）格式图片则无法显示，更换为（.png）或者（.jpg）格式图片

3.给经纬度赋初值

经纬度要先给一个值，如果一开始是空，那么markers不会显示，具体原因我也不鸡丢

4.把cover[]放在onLoad()或者onShow()函数里

修正后的代码如下：

		<view>
			<map :scale="scale" style="width: 680rpx; height: 780rpx;" :latitude="latitude" :longitude="longitude"
				:markers="covers"></map>
		</view>

data() {
			return {
				scale: 20, // 地图缩放级别  
				id : 0,
				latitude: '30.653141',
				longitude: '103.806504',
				token: '',
				covers: []
			}
		},

onShow() {
			this.covers=[{	
					id : 0,
					width:50,
					height:50,
				    latitude: this.latitude,
					longitude: this.longitude,					
					iconPath: '/static/location.png'				
			}]
		},

OK现在就可以正常显示了，还有问题的话大家可以在评论区交流