Type Definitions

expo-gaode-map ships with full TypeScript definitions. This page highlights the most commonly used ones. For the full source of truth, refer to packages/core/src/types.

Common types

LatLng

interface LatLng {
  latitude: number;
  longitude: number;
}

LatLngPoint

Many map and overlay APIs accept either object or tuple coordinates:

type LatLngPoint = LatLng | [number, number] | number[];

Point

interface Point {
  x: number;
  y: number;
}

CameraPosition

interface CameraPosition {
  target?: LatLng;
  zoom?: number;
  bearing?: number;
  tilt?: number;
}

CameraUpdate

interface CameraUpdate {
  target?: LatLng;
  zoom?: number;
  bearing?: number;
  tilt?: number;
}

LatLngBounds

interface LatLngBounds {
  southwest: LatLng;
  northeast: LatLng;
}

MapPoi

interface MapPoi {
  id: string;
  name: string;
  position: LatLng;
}

MapType

enum MapType {
  Standard = 1,
  Satellite = 2,
  Night = 3,
  Navi = 4,
  Bus = 5, // Android
}

ColorValue

type ColorValue = string | number;

SDKConfig

interface SDKConfig {
  androidKey?: string;
  iosKey?: string;
  webKey?: string;
}

PrivacyStatus

interface PrivacyStatus {
  hasShow: boolean;
  hasContainsPrivacy: boolean;
  hasAgree: boolean;
  isReady: boolean;
  privacyVersion?: string | null;
  agreedPrivacyVersion?: string | null;
  restoredFromStorage?: boolean;
}

Map types

LocationEvent

interface LocationEvent {
  latitude: number;
  longitude: number;
  accuracy: number;
}

CameraEvent

interface CameraEvent {
  cameraPosition: CameraPosition;
  latLngBounds: LatLngBounds;
}

MapViewRef

interface MapViewRef {
  moveCamera(position: CameraUpdate, duration?: number): Promise<void>;
  getLatLng(point: Point): Promise<LatLng>;
  setCenter(center: LatLngPoint, animated?: boolean): Promise<void>;
  setZoom(zoom: number, animated?: boolean): Promise<void>;
  getCameraPosition(): Promise<CameraPosition>;
  takeSnapshot(): Promise<string>;
}

MapViewProps

For full usage notes, see /en/api/mapview:

interface MapViewProps {
  mapType?: MapType;
  initialCameraPosition?: CameraPosition;
  myLocationEnabled?: boolean;
  followUserLocation?: boolean;
  indoorViewEnabled?: boolean;
  buildingsEnabled?: boolean;
  labelsEnabled?: boolean;
  compassEnabled?: boolean;
  zoomControlsEnabled?: boolean;
  scaleControlsEnabled?: boolean;
  myLocationButtonEnabled?: boolean;
  trafficEnabled?: boolean;
  maxZoom?: number;
  minZoom?: number;
  zoomGesturesEnabled?: boolean;
  scrollGesturesEnabled?: boolean;
  rotateGesturesEnabled?: boolean;
  tiltGesturesEnabled?: boolean;
  distanceFilter?: number;
  headingFilter?: number;
  worldMapSwitchEnabled?: boolean;
  customMapStyle?: {
    styleId?: string;
    styleDataPath?: string;
    extraStyleDataPath?: string;
  };
  cameraEventThrottleMs?: number;
  onMapPress?: (event: NativeSyntheticEvent<LatLng>) => void;
  onPressPoi?: (event: NativeSyntheticEvent<MapPoi>) => void;
  onMapLongPress?: (event: NativeSyntheticEvent<LatLng>) => void;
  onCameraMove?: (event: NativeSyntheticEvent<CameraEvent>) => void;
  onCameraIdle?: (event: NativeSyntheticEvent<CameraEvent>) => void;
  onLoad?: (event: NativeSyntheticEvent<{}>) => void;
  onLocation?: (event: NativeSyntheticEvent<LocationEvent>) => void;
}

Location types

Coordinates

interface Coordinates extends LatLng {
  altitude: number;
  accuracy: number;
  heading: number;
  speed: number;
  timestamp: number;
  isAvailableCoordinate?: boolean;
  address?: string;
}

ReGeocode

interface ReGeocode extends Coordinates {
  address: string;
  country: string;
  province: string;
  city: string;
  district: string;
  cityCode: string;
  adCode: string;
  street: string;
  streetNumber: string;
  poiName: string;
  aoiName: string;
  description?: string;
  coordType?: 'GCJ02' | 'WGS84';
  buildingId?: string;
}

LocationAccuracy

enum LocationAccuracy {
  BestForNavigation = 0,
  Best = 1,
  NearestTenMeters = 2,
  HundredMeters = 3,
  Kilometer = 4,
  ThreeKilometers = 5,
}

LocationMode

enum LocationMode {
  HighAccuracy = 1,
  BatterySaving = 2,
  DeviceSensors = 3,
}

CoordinateType

enum CoordinateType {
  AMap = -1,
  Baidu = 0,
  MapBar = 1,
  MapABC = 2,
  SoSoMap = 3,
  AliYun = 4,
  Google = 5,
  GPS = 6,
}

GeoLanguage / LocationProtocol

type GeoLanguage = 'DEFAULT' | 'EN' | 'ZH';
type LocationProtocol = 'HTTP' | 'HTTPS';

PermissionStatus

interface PermissionStatus {
  granted: boolean;
  status: 'granted' | 'denied' | 'undetermined';
  fineLocation?: boolean;
  coarseLocation?: boolean;
  backgroundLocation?: boolean;
  shouldShowRationale?: boolean;
  isPermanentlyDenied?: boolean;
  isAndroid14Plus?: boolean;
  message?: string;
}

Overlay types

MarkerProps

interface MarkerProps {
  position: LatLngPoint;
  icon?: string | ImageSourcePropType;
  iconWidth?: number;
  iconHeight?: number;
  title?: string;
  snippet?: string;
  opacity?: number;
  draggable?: boolean;
  flat?: boolean;
  zIndex?: number;
  anchor?: Point;
  centerOffset?: Point;
  animatesDrop?: boolean;
  pinColor?: 'red' | 'orange' | 'yellow' | 'green' | 'cyan' | 'blue' | 'violet' | 'magenta' | 'rose' | 'purple';
  children?: React.ReactNode;
  cacheKey?: string;
  growAnimation?: boolean;
  smoothMovePath?: LatLng[];
  smoothMoveDuration?: number;
  onMarkerPress?: (event: NativeSyntheticEvent<LatLng>) => void;
  onMarkerDragStart?: (event: NativeSyntheticEvent<LatLng>) => void;
  onMarkerDrag?: (event: NativeSyntheticEvent<LatLng>) => void;
  onMarkerDragEnd?: (event: NativeSyntheticEvent<LatLng>) => void;
}

PolylineProps

interface PolylineProps {
  points: LatLngPoint[];
  strokeWidth?: number;
  strokeColor?: ColorValue;
  zIndex?: number;
  colors?: ColorValue[];
  gradient?: boolean;
  geodesic?: boolean;
  simplificationTolerance?: number;
  dotted?: boolean;
  texture?: string;
  onPolylinePress?: (event: NativeSyntheticEvent<{}>) => void;
}

PolygonProps

interface PolygonProps {
  points: LatLngPoint[] | LatLngPoint[][];
  strokeWidth?: number;
  strokeColor?: ColorValue;
  fillColor?: ColorValue;
  zIndex?: number;
  simplificationTolerance?: number;
  onPolygonPress?: (event: NativeSyntheticEvent<{}>) => void;
  onPolygonSimplified?: (
    event: NativeSyntheticEvent<{
      originalCount: number;
      simplifiedCount: number;
    }>
  ) => void;
}

CircleProps

interface CircleProps {
  center: LatLngPoint;
  radius: number;
  strokeWidth?: number;
  strokeColor?: ColorValue;
  fillColor?: ColorValue;
  zIndex?: number;
  onCirclePress?: (event: NativeSyntheticEvent<{}>) => void;
}

HeatMapProps

interface HeatMapGradient {
  colors: ColorValue[];
  startPoints: number[];
}

interface HeatMapProps {
  data: LatLngPoint[];
  visible?: boolean;
  radius?: number;
  opacity?: number;
  gradient?: HeatMapGradient;
  allowRetinaAdapting?: boolean;
}

MultiPointProps

interface MultiPointItem {
  latitude: number;
  longitude: number;
  id?: string | number;
  data?: unknown;
}

interface MultiPointProps {
  points: MultiPointItem[];
  icon?: string | ImageSourcePropType;
  iconWidth?: number;
  iconHeight?: number;
  onMultiPointPress?: (
    event: NativeSyntheticEvent<{
      index: number;
      item: MultiPointItem;
    }>
  ) => void;
}

ClusterProps

interface ClusterPoint {
  latitude?: number;
  longitude?: number;
  position?: LatLngPoint;
  properties?: Record<string, unknown>;
}

interface ClusterParams {
  count: number;
  latitude: number;
  longitude: number;
  pois?: ClusterPoint[];
  id?: number;
  position?: LatLng;
}

interface ClusterProps {
  icon?: string;
  radius?: number;
  minClusterSize?: number;
  clusterStyle?: ViewStyle;
  clusterBuckets?: ({ minPoints: number } & ViewStyle)[];
  clusterTextStyle?: TextStyle;
  points: ClusterPoint[];
  renderMarker?: (item: ClusterPoint) => React.ReactNode; // not implemented
  renderCluster?: (params: ClusterParams) => React.ReactNode; // not implemented
  onClusterPress?: (event: NativeSyntheticEvent<ClusterParams>) => void;
}

Module event types

type ExpoGaodeMapModuleEvents = {
  onLocationUpdate: (location: Coordinates | ReGeocode) => void;
  onHeadingUpdate: (heading: {
    magneticHeading: number;
    trueHeading: number;
    headingAccuracy: number;
    x: number;
    y: number;
    z: number;
    timestamp: number;
  }) => void;
};

Import example

import type {
  CameraPosition,
  Coordinates,
  LatLng,
  MapViewRef,
  MarkerProps,
  PermissionStatus,
  PolygonProps,
  ReGeocode,
} from 'expo-gaode-map';