本文主要是介绍使用高德地图vue组件库vue-amap是,用content渲染点标记问题解决,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
给content添加内容:
content: `<div class="lavatoryMarker">${item.name}</div>`,
出现.amap-marker长度不自动增加,导致文字换行:
解决办法,就是让文字不换行:
.lavatoryMarker {// 解决遮挡还能点击下层pointer-events: auto;position: relative;background: #0075FF;padding: 0 24px;box-shadow: 0 1px 10px 0 rgba(0, 115, 247, 0.5);height: 48px;font-weight: Regular;font-size: 28px;color: #FFFFFF;line-height: 48px;text-align: center;border-radius: 10px;word-break: keep-all; /* 不换行 */white-space: nowrap; /* 不换行 */// transform: translateX(-50%);}
解决办法是给cantent的div加上最后两行代码。
成果:
这篇关于使用高德地图vue组件库vue-amap是,用content渲染点标记问题解决的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!