跳到主要内容

useMap

地图

何时使用​

当需要操作地图相关

API​

警告

在React中, mapContext不能作为方法可用的标准. 由于context创建的异步性. 请手动获取或者增加delay再调用方法

const [
  mapContext,
  {
    get,
    open,
    include,
    moveTo,
    translate,
    toggleMarkers,
  },
] = useMap(mapId, component?);

参数说明​

参数说明类型默认值
mapId对应Map组件 idstring-
component若为自定义组件对应组件实例TaroGeneral.IAnyObject-

返回值说明​

返回值说明类型
mapContext地图实例MapContext | undefined
get获取当前地图中心的经纬度、范围视野、缩放级别、旋转角、倾斜角PromiseOptionalAction<string, GetSuccessCallbackResult>;
open拉起地图 APP 选择导航PromiseAction<ExcludeOption<MapContext.OpenMapAppOption>>
include缩放视野展示所有经纬度PromiseParamsAction<(points: MapContext.MapPosition[], padding?: number[]) => void>
moveTo将地图中心移置当前定位点PromiseOptionalAction<ExcludeOption<MapContext.MoveToLocationOption>>
translate平移 marker，带动画PromiseAction<ExcludeOption<MapContext.TranslateMarkerOption>>
toggleMarkers展示/移除 markerPromiseParamsAction<(markers: Marker | number[], clear?: boolean) => void>

GetSuccessCallbackResult​

export type GetSuccessCallbackResult = {
  center: UnionResult<MapContext.GetCenterLocationSuccessCallbackResult>;
  region: UnionResult<MapContext.GetRegionSuccessCallbackResult>;
  rotate: UnionResult<MapContext.GetRotateSuccessCallbackResult>;
  scale: UnionResult<MapContext.GetScaleSuccessCallbackResult>;
  skew: UnionResult<MapContext.GetSkewSuccessCallbackResult>;
};

代码演示​

Hook 支持度​

微信小程序H5ReactNative
✔️