(vue)高德地图自定义标记不设宽度,字体会压缩的问题

292 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

记录一个关于高德地图查不到的问题。 当用VUE循环使用自定义标记时,因为字体多少不一致,所以不好直接设置宽度,但如果不设置宽度的话,字体就会往下排列,非常的不美观。所以是一定要设置一下宽度的,要根据不同的字体设置不同的宽度 废话不多说:

第一步用js计算每个字体大小,获取到offsetWidth就是全部的长度了,然后创建个字段放到你要使用的数组里

image.png 红框是你的文字,绿框就是你获取到每个对象的宽度 然后就用动态加载style把width传进去就好了。

image.png 这样地图上就不会显示错乱了,是不是很简单。希望你用的到,有用的话别忘了点赞哈~