百度地图中心点偏移-Javascript
百度地图中心点偏移-Javascript功能介绍：整体思路：具体实现：一、变更代码执行顺序：二、map.panBy：功能介绍：本文记录了百度地图BMap实现中，出现中心点偏移问题解决方法，基于点聚合功能出现的问题。地图正常显示效果：地图实际显示效果：整体思路：原代码：注意：这里为了实现效果使用了原生js的代码直接控制display改变，实际应用中可能是jQuery的hide()、show()，vu
·
百度地图中心点偏移-Javascript
功能介绍：
本文记录了百度地图BMap实现中，出现中心点偏移问题解决方法，基于点聚合功能出现的问题。
地图正常显示效果：
地图实际显示效果：
整体思路：
原代码：
注意：这里为了实现效果使用了原生js的代码直接控制display改变，实际应用中可能是jQuery的hide()、show()，vue中的v-if控制切换地图显隐。
<body>
<div id="map" style="width: 1200px;height: 800px;display: none"></div>
</body>
<script>
// 创建地图实例
const map = new BMap.Map('map');
// 配置中心点坐标
const center = new BMap.Point(106.5, 35.8);
// 设定地图的中心点坐标和缩放值
map.centerAndZoom(center, 5);
// 启用滚轮放大缩小功能
map.enableScrollWheelZoom(true);
document.getElementById('map').style.display = 'block';
</script>
正常百度地图的中心点应按照设置点进行显示，此处明显向左上角方向发生偏移，查询资料后发现是因为原容器进行了隐藏处理（display:none），百度地图init初始化在dom元素解除隐藏之前，会认为容器的宽高为0，基于这个思路向下解决，解决方法如下。
具体实现：
一、变更代码执行顺序：
先解除容器的隐藏再初始化地图：
<script>
document.getElementById('map').style.display = 'block';
// 创建地图实例
const map = new BMap.Map('map');
// 配置中心点坐标
const center = new BMap.Point(106.5, 35.8);
// 设定地图的中心点坐标和缩放值
map.centerAndZoom(center, 5);
// 启用滚轮放大缩小功能
map.enableScrollWheelZoom(true);
</script>
二、map.panBy：
设置地图偏移，偏移像素为容器宽高的二分之一，实际开发中应计算获取容器宽高：
let centerX = 600; // 容器宽度的二分之一
let centerY = 400; // 容器高度的二分之一
map.panBy(centerX, centerY); // 中心点偏移像素
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)