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