百度地图中心点偏移-Javascript

iatkotworld

已于 2022-04-20 09:18:58 修改

阅读量2.6k

点赞数

分类专栏： html 百度地图 javascript 文章标签： javascript 前端

于 2022-04-11 13:18:56 首次发布

本文链接：https://blog.csdn.net/weixin_40400844/article/details/124095097

版权

javascript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

html

4 篇文章 1 订阅

订阅专栏

百度地图

3 篇文章 0 订阅

订阅专栏

百度地图中心点偏移-Javascript

功能介绍：
整体思路：
具体实现：
- 一、变更代码执行顺序：
- 二、map.panBy：

功能介绍：

本文记录了百度地图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); // 中心点偏移像素

iatkotworld

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
百度地图中心点偏移-Javascript

百度地图中心点偏移-Javascript功能介绍：整体思路：具体实现：一、变更代码执行顺序：二、map.panBy：功能介绍：本文记录了百度地图BMap实现中，出现中心点偏移问题解决方法，基于点聚合功能出现的问题。地图正常显示效果：地图实际显示效果：整体思路：原代码：注意：这里为了实现效果使用了原生js的代码直接控制display改变，实际应用中可能是jQuery的hide()、show()，vue中的v-if控制切换地图显隐。<body> <div id="map"
复制链接

扫一扫