Taro 小程序多端适配踩坑记 —— 地图篇

第一次接触Taro框架的地图(Map)组件，不停的踩坑😭，赶紧记录下来。。。

首先，我们需要区分当前所处环境，再进行多端兼容性适配：

import Taro from '@tarojs/taro';

const TT = 'tt';  // 字节跳动抖音小程序
const WEAPP = 'weapp';  // 微信小程序
const ALIPAY = 'aliapp';  // 支付宝小程序

export const getAppName = () => {
  const curEnv = Taro.getEnv();
  return {
    WEAPP,
    ALIPAY,
    TT
  }[curEnv] || undefined;
};

export const isWeapp = () => getAppName() === WEAPP;
export const isAliapp = () => getAppName() === ALIPAY;
export const isTT = () => getAppName() === TT;

以下代码都以React为例，仅限于微信小程序、支付宝小程序以及抖音小程序：

一、Marker 标记点

1.1 callout 气泡

Taro 在支付宝小程序只能设置 content 属性，无法设置其他样式，所以在支付宝小程序中如果需要更加丰富的样式定义，可以使用 customCallout。

1.1.1 textAlign 文本对齐方式

• 微信小程序：挪动的是整个气泡的对齐位置，而不是气泡内文本的对齐位置

• 抖音小程序：正常 ✅

1.1.2 bgColor 背景色

地图中的颜色值color/borderColor/bgColor等需使用6位（8位）十六进制表示，8位时后两位表示 alpha 值，如：#000000AA

• 微信小程序：正常 ✅

• 抖音小程序

const markers = [{
  callout: {
    content: '我是callout'
    bgColor: '#0f0f0f22',
    borderColor: '#0f0f0faa',
    borderWidth: 10,
    textAlign: 'left'
  }
}]

1.1.3 scale 缩放级别

• 微信小程序中 scale 的范围是：3-20，默认值是 16

• 抖音小程序中 scale 的范围时：3-19，默认值时 16

• 支付宝小程序中 scale 的范围时：5-18，默认值是 16

1.1.4 content 内容

• 支付宝小程序的content属性不支持换行（\n或使用模版字符串进行换行）

二、Polygons 多边形

2.1 微信小程序 / 支付宝小程序使用 useState或 setState 更改 polygons 属性

const [polygons, setPolygons] = useState([]);
<Map polygons={polygons} />

2.2 抖音小程序中 polygons API无效 ❌

三、onRegionChange API 视野发生变化时触发的事件

3.1 微信小程序

• onRegionChange API 的返回值为：

属性	类型	说明	备注
type	string	视野变化开始、结束时触发	begin 或 end
causeBy	string	导致视野变化的原因	begin 阶段：gesture(手势触发)、update(接口触发) ｜ end 阶段：drag(拖动导致)、scale(缩放导致)、update(调用更新接口导致)
detail	regionDetail	视野改变详情

• regionDetail 内的属性：

属性	类型	说明
rotate	number	旋转角度
skew	number	倾斜角度
scale	number	缩放级别
centerLocation	point	中心点
region	{notheast: point, southeast: point}

• point 内的属性：

属性	类型	说明
longitude	number	经度
latitude	number	纬度

3.2 支付宝小程序

onRegionChange API 的返回值为：

属性	类型	说明	备注
type	string	视野变化开始、结束时触发	begin 或 end
latitude	number	视野中心纬度
longitude	number	视野中心经度
scale	number	缩放级别
skew	number	倾斜角度
rotate	number	旋转角度
causedBy	string	导致视野变化的原因	begin 阶段：update(接口触发)、gesture(手势触发）｜ end 阶段：update(接口触发)、drag/scale/skew/rotate(手势触发)

3.3 抖音小程序中 onRegionChange API无效 ❌

四、总结

在使用 Taro 进行多端开发时，一定要分别在对应的官方文档上查看 api 是否支持

支付宝小程序官方文档
微信小程序官方文档
字节小程序官方文档
Taro 官方文档

本篇文章将持续更新中，如果有问题的地方，欢迎大家指出来～💗