百度地图API详解之地图容器

这时我们修改浏览器窗口大小，地图会自动铺图并且地图相对于左边和上边的距离保持不变，一切效果OK。下面我们添加编写一个全屏函数：

function toFullScreen() {
    document.getElementById('top').style.display = 'none';
    document.getElementById('aside').style.display = 'none';
    var h = document.documentElement.clientHeight;
    var mapContainer = document.getElementById('map');
    mapContainer.style.height = h + "px";
    mapContainer.style.marginLeft = "0";
}

这个函数将两个区域进行隐藏，同时调整地图容器，我们在控制台调用这个方法，会得到这个结果：

和之前的图对比可以发现地图区域向左上方移动了，这样会给用户地图“跳动”的感觉，为了让地图与用户眼睛的位置保持一致，我们需要修改toFullScreen函数：

function toFullScreen() {
    map.disableAutoResize();
    var h = document.documentElement.clientHeight;
    var curPix = map.pointToPixel(map.getCenter());
    var newPix = new BMap.Pixel(curPix.x - 80, curPix.y - 40);
    var newCenter = map.pixelToPoint(newPix);
    document.getElementById('top').style.display = 'none';
    document.getElementById('aside').style.display = 'none';
    var mapContainer = document.getElementById('map');
    mapContainer.style.height = h + "px";
    mapContainer.style.marginLeft = "0";
    map.checkResize();
    map.setCenter(newCenter);
    map.enableAutoResize();
}

这里大致的思路是，首先停止地图自动适应容器变化，接着通过坐标转换得到当前中心点对应的像素坐标curPix，再计算出全屏后中心点的像素坐标newPix，进而转换为经纬度newCenter。下面调用修改容器尺寸并调用checkResize通知地图容器发生变化，接着再重新设置中心点并恢复自动适应容器变化。效果如下：

此时，全屏过程中地图没有任何的“跳动”，从而提供了较好的用户体验。谷歌地图也使用了类似的效果，当左侧面板收起时，地图区域自动向左侧扩展，而没有向左侧跳动。

最后说明一下，上面的checkResize方法没有考虑全屏幕的情况，因为它不是本文的重点，就不再这里给出具体代码了。

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!