最近在做毕设项目,要搭一个网站(体力活,没什么技术含量),其中有几个页面需要地图显示。考虑到去年暑假玩过两个月的百度地图API,也算半个老司机了,就自然地准备接着用,直到出现了下面的问题。
页面施工第一阶段:
(美滋滋的没什么毛病)
页面施工第二阶段:
此时就出现弹出页面中的地图模块中有空白的情况。
身为半个老司机,我立刻想到了这应该是出了冲突,将主页面的地图部分注释掉后,弹出页面显示正常:
此时我首先怀疑的是变量声明语句出了问题,
var map = new BMap.Map("allmap", {enableMapClick: false});
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var map = new BMap.Map("modalmap", {enableMapClick: false});
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
这两段语句虽然放在了不同的函数块下,但是都是用var声明的,让人有理由怀疑我大概是踩中了ES6的坑。
然而我把下面的变量名改掉后,依然没什么用。
跑到百度开发者社区上逛了一圈,发现类似问题还是有不少人反映的:
这个人应该是内部人员,看到发帖日期,感觉心凉了半截:
最后我发现高德导航在这方面做得还是挺不错的:D
The End:
查看页面元素可以发现地图模块被重新划分成了很多<img>标签,大致揣测下其后端应当是将整个地图分块分层做了预渲染,形成很多图片,其API调用就是对这些图片的get请求以及再拼接的过程。而在这些图片被多个实例调用的场景下,百度地图出了bug,而且可能是数据结构级别的缺陷,才难以修复(当然不排除其他原因)。
(还是阿里爸爸牛掰)