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方法获取的自定义属性来判断 并设置相应的样式
该需求是帮朋友写的,代码不太完整,请见谅!