Location Tracking
Examples for requesting permission, reading location, and tracking updates.
⚠️ These examples use
getPrivacyStatus()to detect whether first-time privacy consent is already available. In a real app, set privacy state from your own privacy dialog agree callback.
Basic location
tsx
import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { ExpoGaodeMapModule, type ReGeocode } from 'expo-gaode-map';
export default function BasicLocation() {
const [location, setLocation] = useState<ReGeocode | null>(null);
useEffect(() => {
if (!ExpoGaodeMapModule.getPrivacyStatus().isReady) {
ExpoGaodeMapModule.setPrivacyConfig({
hasShow: true,
hasContainsPrivacy: true,
hasAgree: true,
});
}
ExpoGaodeMapModule.initSDK({
webKey: 'your-web-api-key',
});
}, []);
const getLocation = async () => {
try {
const loc = await ExpoGaodeMapModule.getCurrentLocation();
setLocation(loc as ReGeocode);
} catch (error) {
console.error('Failed to get location:', error);
}
};
return (
<View style={{ flex: 1, padding: 20 }}>
<Button title="Get Location" onPress={getLocation} />
{location && (
<Text>
Location: {location.latitude}, {location.longitude}
</Text>
)}
</View>
);
}Continuous tracking
tsx
import { useEffect, useState } from 'react';
import { View, Text, Button } from 'react-native';
import { ExpoGaodeMapModule, type ReGeocode } from 'expo-gaode-map';
export default function ContinuousLocation() {
const [location, setLocation] = useState<ReGeocode | null>(null);
const [isTracking, setIsTracking] = useState(false);
useEffect(() => {
if (!ExpoGaodeMapModule.getPrivacyStatus().isReady) {
ExpoGaodeMapModule.setPrivacyConfig({
hasShow: true,
hasContainsPrivacy: true,
hasAgree: true,
});
}
ExpoGaodeMapModule.initSDK({
webKey: 'your-web-api-key',
});
ExpoGaodeMapModule.setLocatingWithReGeocode(true);
ExpoGaodeMapModule.setInterval(2000);
const subscription = ExpoGaodeMapModule.addLocationListener((loc) => {
setLocation(loc as ReGeocode);
});
return () => subscription.remove();
}, []);
const startTracking = () => {
ExpoGaodeMapModule.start();
setIsTracking(true);
};
const stopTracking = () => {
ExpoGaodeMapModule.stop();
setIsTracking(false);
};
return (
<View style={{ flex: 1, padding: 20 }}>
<Button
title={isTracking ? 'Stop Tracking' : 'Start Tracking'}
onPress={isTracking ? stopTracking : startTracking}
/>
{location && (
<View>
<Text>Latitude: {location.latitude.toFixed(6)}</Text>
<Text>Longitude: {location.longitude.toFixed(6)}</Text>
<Text>Accuracy: {location.accuracy.toFixed(2)} m</Text>
{location.address && <Text>Address: {location.address}</Text>}
</View>
)}
</View>
);
}Map tracking
tsx
import { useEffect, useState } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import {
ExpoGaodeMapModule,
MapView,
type ReGeocode,
} from 'expo-gaode-map';
export default function MapLocationTracking() {
const [location, setLocation] = useState<ReGeocode | null>(null);
const [isTracking, setIsTracking] = useState(false);
useEffect(() => {
if (!ExpoGaodeMapModule.getPrivacyStatus().isReady) {
ExpoGaodeMapModule.setPrivacyConfig({
hasShow: true,
hasContainsPrivacy: true,
hasAgree: true,
});
}
ExpoGaodeMapModule.initSDK({
webKey: 'your-web-api-key',
});
ExpoGaodeMapModule.setLocatingWithReGeocode(true);
ExpoGaodeMapModule.setInterval(2000);
const subscription = ExpoGaodeMapModule.addLocationListener((result) => {
setLocation(result as ReGeocode);
});
return () => {
subscription.remove();
ExpoGaodeMapModule.stop();
};
}, []);
const toggleTracking = () => {
if (isTracking) {
ExpoGaodeMapModule.stop();
} else {
ExpoGaodeMapModule.start();
}
setIsTracking(!isTracking);
};
return (
<View style={styles.container}>
<MapView
style={styles.map}
initialCameraPosition={{
target: {
latitude: location?.latitude || 39.9,
longitude: location?.longitude || 116.4,
},
zoom: 15,
}}
myLocationEnabled
followUserLocation={isTracking}
/>
<View style={styles.controls}>
<Button
title={isTracking ? 'Stop Tracking' : 'Start Tracking'}
onPress={toggleTracking}
color={isTracking ? '#FF3B30' : '#007AFF'}
/>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
map: { flex: 1 },
controls: {
position: 'absolute',
bottom: 30,
left: 20,
right: 20,
},
});