uniapp地图标记自定义图标样式调整详解
在uniapp开发中，使用地图组件时，常常需要自定义地图标记（marker）的图标样式。本文将详细讲解如何修改uniapp map组件中自定义marker图片的样式，超越简单的宽高调整。
问题描述：除了修改marker图标的宽度和高度，如何进一步调整其样式？例如，添加阴影或使用gif动画作为图标。
解答：uniapp地图组件的marker图标样式主要通过json配置进行设置。 官方文档中已经详细说明了如何配置 iconpath、width、height 等属性来设置图标路径、宽度和高度。 但是，如果想要实现更复杂的样式修改，例如添加阴影或使用gif动画，则无法直接通过json配置中的css样式来完成。
这是因为uniapp地图组件的自定义marker图标本质上只是图片，json配置只提供了基本的图片属性设置。 想要实现gif动画或阴影效果，需要预先准备好包含这些效果的图片资源（例如，一个gif动画图片或一个带有阴影的png图片）。
以下代码片段展示了如何通过json配置设置marker图标的基本属性：
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', //个性化图标地址
title:"", //图标标题
rotate:0, //旋转角度
alpha:1, //透明度0-1
width:16, //宽
height:16 //高
}, {
latitude: 39.90,
longitude: 116.39,
iconPath: '../../../static/location.png' //个性化图标地址
}]
}
},在这个例子中，iconpath 属性指定了自定义图标的路径，width 和 height 属性分别设置了图标的宽度和高度，rotate 和 alpha 分别控制图标的旋转角度和透明度。 要实现更复杂的样式，例如阴影或动画效果，需要在设计阶段就将这些效果添加到图标图片本身，然后在 iconpath 中指定该图片的路径。 换句话说，需要由ui设计师制作包含所需效果的图片资源。
