vue-amap如何设置文本覆盖物（text）的背景颜色/图片

vue-amap如何设置文本覆盖物（text）的背景颜色/图片

一、css设置

在浏览器中查看标签，可发现text组件有一个‘amap-overlay-text-container’的class

只需要用deep修改该class样式 即可

@{deep}.amap-overlay-text-container{background: url(../../../assets/img/icons1.png)

二、event设置

<1>整体设置，全体text显示一种背景图

组件绑定event，使用setStyle方法来设置样式

   

这个vue-amap官方没有，需要到高德到官方文档中查看   高德官网地址：https://developer.amap.com/api/javascript-api/reference/overlay#text

截图中的imgurl是我在组件头部imprt引入进来的图片资源，因为在开发过程中发现直接写相对路径的方式（即css设置那种）并不显示图片

也尝试了url中写require等多种方式，都不奏效，只有模版字符串引入变量成功了。若其他方式可成功，请移步评论区留言

<2>分类设置，根据数据状态显示多种背景色

先看下效果

还是通过event来设置，只是增加了数据判断

1.添加event对象到循环数据中

marker内容写了数据状态的判断并写回到了返回数据中，这里直接利用这个判断在循环数据中添加了event参数，组件中添加event即可

   

2.添加exData自定义属性（该方法后期想到的，未实际测试）

组件添加自定义属性 exData 来记录当前数据的状态值，在events中根据通过getExData方法获取的自定义属性来判断 并设置相应的样式

  

该需求是帮朋友写的，代码不太完整，请见谅！