微信小程序 Map 组件踩坑

最近使用了微信小程序中的 map 组件,还是踩了很多坑。

将地图中心移置当前定位的位置,v2.8.0以后也支持移动地图中心点到指定的位置。

// 没有参数则获取用户当前位置,并将地图中心点移至该位置
mapCtx.moveToLocation();
// 有参数则将地图中心点移至指定位置
mapCtx.moveToLocation({
	longitude: xxxxx,
	latitude: xxxxx
});

这里需要注意的是,该方法必须申请 useLocation 权限才可以使用,仅管有参数时并不获取用户地理位置。这样的设计不是很友好,对于仅仅是把中心点移动到指定位置的需求来说,去申请权限成本稍高了些,尤其是对个人账号根本无法申请到定位权限。建议设计者单独提一个方法出来做这件事。

变通的做法是通过为 map 组件指定 longitude、latitude 来达到同样的效果,但是这种方式地图没有移动动画效果。

缩放视野展示所有经纬度。

这个方法也很坑,按文档中所说,接口调用成功后会回调 success 函数。实际效果是确实回调了,但并非是在处理完缩放视野之后,而是在之前就回调了。这就导致使用该函数后地图缩放了,但获取缩放级别 MapContext.getScale() 成了问题。建议设计者考虑改为处理完缩放视野后再进行回调。

变通的做法是等待一段时间后再获取缩放级别。

mapCtx.includePoints({
	points: [{
		longitude: xxx,
		latitude: xxx
	}, {
		longitude: xxx,
		latitude: xxx
	}],
	success() {
		setTimeout(() => {
			mapCtx.getScale({
				// ... 
			});
		}, 500);
	}
});