腾讯地图技术小记(一)

业务背景:

最近使用腾讯地图做技术支持的功能,具体是在地图上展现某块景区的内容,然后为了填充景区地图区域的美观性,使用覆盖图的形式,进行美化,但是地层的POI图标也就是地图上的超市、景观、车站等名称都被掩盖,也咨询过腾讯地图项目组,项目组的回复是因为的使用的是腾讯地图JavaScript组件中的map对象,此map对象用于手机端时,地图其实是每块切片组合而成,地图上的POI无法进行调整他的优先层级,可以理解为POI的标注只是一张图片。但是甲方想要标注出来每个景点的名称,这次就直接使用腾讯地图JavaScript组件中Label对象,此对象可以在地图上进行文字标注,标注内容可以是HTML标签,也可以通过方法来赋予Label对象CSS样式。
但是会出现一个这样的问题,景点的名称上部会有一个景点标识,景点标识跟景点的名称无法形成居中的效果,这里我用到了Label的Offset,对label的位置进行了偏移,但是景点名称大小不一,我们如何去做全适应的居中,一开始我尝试了多个if,可以实现效果,但是这样太笨重,如果出现更长的名称我们就要在代码中进行修改并调试,这会因为这个小事添加工作量.

解决方案:

1.限制名称长度,并且把每个长度下的状况都考虑到并写到代码里面去
2.使用等比数列的方式,利用公式的方式,来科学的调整文字的位置。
最后我选了第二个方案,因为确实比较省事,这也是我在开发生涯中第一次使用数学公式来进行解决问题,当然最后成功解决完问题的喜悦与成就感已经写满在了脸上。

发布了15 篇原创文章 · 获赞 4 · 访问量 22

猜你喜欢

转载自blog.csdn.net/xxb_assassin/article/details/105470046