Navigation

expo-gaode-map-navigation is an all-in-one navigation module. It includes the map rendering stack and provides route planning plus an official navigation UI.

Installation

bun add expo-gaode-map-navigation
# or
yarn add expo-gaode-map-navigation
# or
npm install expo-gaode-map-navigation

Binary conflict

expo-gaode-map-navigation and expo-gaode-map cannot be installed together.

The navigation package already includes full map functionality.

Configuration

Configure native keys via Config Plugin (recommended):

{
  "expo": {
    "plugins": [
      [
        "expo-gaode-map-navigation",
        {
          "iosKey": "your-ios-api-key",
          "androidKey": "your-android-api-key",
          "enableLocation": true
        }
      ]
    ]
  }
}

Rebuild:

npx expo prebuild --clean
npx expo run:ios
# or
npx expo run:android

Initialize at app startup:

import { ExpoGaodeMapModule } from 'expo-gaode-map-navigation';

if (!ExpoGaodeMapModule.getPrivacyStatus().isReady) {
  ExpoGaodeMapModule.setPrivacyConfig({
    hasShow: true,
    hasContainsPrivacy: true,
    hasAgree: true,
  });
}

ExpoGaodeMapModule.initSDK({
  webKey: 'your-web-api-key',
});

Built-in Map Notes

• The built-in MapView / Marker / Cluster APIs stay aligned with the core package
• The underlying implementation comes from the navigation SDK, so it still cannot coexist with expo-gaode-map
• Camera movement events support cameraEventThrottleMs
• moveCamera uses CameraUpdate
• Cluster supports icon

Route Planning

Driving:

import { calculateDriveRoute, DriveStrategy } from 'expo-gaode-map-navigation';

const result = await calculateDriveRoute({
  type: 'drive',
  from: { latitude: 39.9, longitude: 116.4 },
  to: { latitude: 39.91, longitude: 116.41 },
  strategy: DriveStrategy.FASTEST,
});

console.log(result.count);

Walking:

import { calculateWalkRoute } from 'expo-gaode-map-navigation';

const result = await calculateWalkRoute({
  type: 'walk',
  from: { latitude: 39.9, longitude: 116.4 },
  to: { latitude: 39.91, longitude: 116.41 },
  multiple: true,
});

Independent route planning (does not affect current navigation state):

import {
  independentDriveRoute,
  selectIndependentRoute,
  startNaviWithIndependentPath,
} from 'expo-gaode-map-navigation';

const routes = await independentDriveRoute({
  from: { latitude: 39.9, longitude: 116.4, name: 'Start' },
  to: { latitude: 39.91, longitude: 116.41, name: 'End' },
});

await selectIndependentRoute({
  token: routes.token,
  routeIndex: 0,
});

await startNaviWithIndependentPath({
  token: routes.token,
  naviType: 0,
});

ExpoGaodeMapNaviView (Official UI)

ExpoGaodeMapNaviView provides a full navigation UI.

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { ExpoGaodeMapNaviView, type ExpoGaodeMapNaviViewRef } from 'expo-gaode-map-navigation';

export default function NavigationScreen() {
  const ref = useRef<ExpoGaodeMapNaviViewRef>(null);

  return (
    <View style={{ flex: 1 }}>
      <ExpoGaodeMapNaviView ref={ref} style={{ flex: 1 }} naviType={0} />
      <View style={{ position: 'absolute', bottom: 20, right: 20 }}>
        <Button
          title="Start"
          onPress={() =>
            ref.current?.startNavigation(
              null,
              { latitude: 39.91, longitude: 116.41 },
              0
            )
          }
        />
        <Button title="Stop" onPress={() => ref.current?.stopNavigation()} />
      </View>
    </View>
  );
}

Related Documentation

• Navigation API
• Web API Guide