解决百度地图多个Label存在定位飘移的问题

背景

最近在开发地图业务用到百度地图。需要在上面画覆盖物,我用到了百度的Label标签+自定义样式形成如下的两个覆盖物。


image.png

问题

画一个覆盖物没有问题,会按照经纬度严格去定位显示正常:如宝安区显示在宝安区的位置

宝安区

如罗湖区显示在罗湖区的位置:

image.png

但是呢,如果两个一起显示就会发现其中的覆盖物的位置会发生漂移了,如下宝安区从1位置漂移到了2位置:

image.png

或者如下罗湖区从1位置漂移到了2位置:


image.png

这个问题困扰了我几天。

解决:
百度了一遍,没发现解决方案,也想过可能是短时间连续调用两次接口造成的,调整各种设置的api也不行。
后来仔细捋了一遍,想到既然是位置信息不对,应该直接去观察生成的覆盖物的样式和正常的例子的覆盖物有啥不一样。
发现官方的例子的覆盖物是这样子的:

官方的例子

而我的覆盖物的样式是这样子的:


我的例子

果然对比一看就猜到了问题:定位position, 官方是absolute 我的是relative。于是我调整为absolute,解决问题。

Label它默认的样式是一个长红色边框,白色背景的长方形。为什么我的是relative? 原因是我是想通过重置label的样式达到显示圆形的效果,因为我的圆形实际上是两个同心圆组成的,外面的圆形浅透明包裹着里面的深色的圆形,所以我给外面的圆形加relative,里面加absolute。不过调整后,两个都是absolute,没问题。

总结

这些错误都是不小心造成的,以后出现类似问题直接对比例子和自己写的最终渲染的样式有啥不一样,从结果去假设,去反推原因!

你可能感兴趣的:(解决百度地图多个Label存在定位飘移的问题)