ΠΡΠΈΠΌΠ΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ
yarn add react-native-yamap
ΠΡΠ»ΠΈ Π²Ρ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π°ΠΏΠΈ Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ°, ΡΠΎ Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π½Π΅ΠΎΠ±ΡΠ·Π°ΡΠ΅Π»ΡΠ½Π°. Π ΡΠ°ΠΊΠΎΠΌ ΡΠ»ΡΡΠ°Π΅, ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ Π°Π²ΡΠΎΠ»ΠΈΠ½ΠΊΠΈΠ½Π³ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ Π΄Π»Ρ react-native@^0.60.0
.
ΠΠ»Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ Yandex MapKit Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠ° Π»ΠΈΠ½ΠΊΠΎΠ²ΠΊΠ° (Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠ° ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΈΠ²Π°Π΅Ρ Π°Π²ΡΠΎΠ»ΠΈΠ½ΠΊΠΈΠ½Π³).
react-native link react-native-yamap
// js
import YaMap from 'react-native-yamap';
YaMap.init('API_KEY');
Π Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ MapKit Π² ΡΡΠ½ΠΊΡΠΈΠΈ didFinishLaunchingWithOptions
Π² AppDelegate.m
#import <YandexMapKit/YMKMapKitFactory.h>
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[YMKMapKit setApiKey: @"API_KEY"];
return YES;
}
// js
import YaMap from 'react-native-yamap';
const currentLocale = await YaMap.getLocale();
YaMap.setLocale('en_US'); // 'ru_RU'...
YaMap.resetLocale();
- getLocale(): Promise<string> - Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ ΡΠ·ΡΠΊ ΠΊΠ°ΡΡ
- setLocale(locale: string): Promise<void> - ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ ΡΠ·ΡΠΊ ΠΊΠ°ΡΡ
- resetLocale(): Promise<void> - ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π΄Π»Ρ ΠΊΠ°ΡΡ ΡΠ·ΡΠΊ ΡΠΈΡΡΠ΅ΠΌΡ
ΠΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π²ΠΎΠ·Π²ΡΠ°ΡΠ°Π΅Ρ Promise, ΠΊΠΎΡΠΎΡΡΠΉ Π²ΡΠΏΠΎΠ»Π½ΡΠ΅ΡΡΡ, ΠΏΡΠΈ ΠΎΡΠ²Π΅ΡΠ΅ Π½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ sdk. Promise ΠΌΠΎΠΆΠ΅Ρ ΠΎΡΠΊΠ»ΠΎΠ½ΠΈΡΡΡΡ, Π΅ΡΠ»ΠΈ sdk Π²Π΅ΡΠ½Π΅Ρ ΠΎΡΠΈΠ±ΠΊΡ.
ΠΠ°ΠΌΠ΅ΡΠ°Π½ΠΈΡ:
- ΠΠ»Ρ Π°Π½Π΄ΡΠΎΠΈΠ΄ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΡΠ·ΡΠΊΠ° ΠΊΠ°ΡΡ Π²ΡΡΡΠΏΠΈΡ Π² ΡΠΈΠ»Ρ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΠΊΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ. Π‘ΠΌ ΠΌΠ΅ΡΠΎΠ΄ setLocale Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π½Π°ΡΠΈΠ²Π½ΠΎΠ³ΠΎ sdk.
- ΠΠ»Ρ ios ΠΌΠ΅ΡΠΎΠ΄Ρ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΡΠ·ΡΠΊΠ° ΠΌΠΎΠΆΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ ΡΠΎΠ»ΡΠΊΠΎ Π΄ΠΎ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΠ΅Π½Π΄Π΅ΡΠ° ΠΊΠ°ΡΡΡ. Π’Π°ΠΊΠΆΠ΅ Π½Π΅Π»ΡΠ·Ρ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ Π²ΡΠ·ΡΠ²Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄, Π΅ΡΠ»ΠΈ ΡΠ·ΡΠΊ ΡΠΆΠ΅ ΠΈΠ·ΠΌΠ΅Π½ΡΠ»ΡΡ (ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ»ΡΠΊΠΎ ΠΏΠΎΡΠ»Π΅ ΠΏΠ΅ΡΠ΅Π·Π°ΠΏΡΡΠΊΠ° ΠΏΡΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΡ). ΠΠ½Π°ΡΠ΅ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΡ ΠΏΡΠΈΠ½ΡΡΡ Π½Π΅ Π±ΡΠ΄ΡΡ, Π° Π² ΡΠ΅ΡΠΌΠΈΠ½Π°Π» Π±ΡΠ΄Π΅Ρ Π²ΡΠ²Π΅Π΄Π΅Π½ΠΎ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Ρ ΠΏΠ΅ΡΠ΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅ΠΌ. Π ΠΊΠΎΠ΄Π΅ ΠΏΡΠΈ ΡΡΠΎΠΌ Π½Π΅ Π±ΡΠ΄Π΅Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠΈ ΠΎΠ± ΠΎΡΠΈΠ±ΠΊΠ΅. ΠΠΈΠΆΠ΅ ΡΡΠ°Π³ΠΌΠ΅Π½Ρ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΡ ΠΈΠ· ΠΊΠΎΠ΄Π° Π² Mapkit SDK (Π€Π°ΠΉΠ» YRTI18nManagerFactory.h)
Sets the application's locale. Useful only if MapKit is not used by
* the application. Also useless if someone else has already set
* the locale (produses warning and does nothing). Can be set to none,
* in this case system locale will be used.
import React from 'react';
import YaMap from 'react-native-yamap';
const route = {
start: { lat: 0, lon: 0},
end: { lat: 10, lon: 10},
};
class Map extends React.Component {
handleOnRouteFound(event) {
console.log(event.nativeEvent.routes);
}
render() {
return (
<YaMap
userLocationIcon={{ uri: 'https://www.clipartmax.com/png/middle/180-1801760_pin-png.png' }}
style={{ flex: 1 }}
/>
);
}
}
interface Point {
lat: Number;
lon: Number;
}
export type MasstransitVehicles = 'bus' | 'trolleybus' | 'tramway' | 'minibus' | 'suburban' | 'underground' | 'ferry' | 'cable' | 'funicular';
export type Vehicles = MasstransitVehicles | 'walk' | 'car';
export interface DrivingInfo {
time: string;
timeWithTraffic: string;
distance: number;
}
export interface MasstransitInfo {
time: string;
transferCount: number;
walkingDistance: number;
}
export interface RouteInfo<T extends (DrivingInfo | MasstransitInfo)> {
id: string;
sections: {
points: Point[];
sectionInfo: T;
routeInfo: T;
routeIndex: number;
stops: any[];
type: string;
transports?: any;
sectionColor?: string;
}
}
export interface RoutesFoundEvent<T extends (DrivingInfo | MasstransitInfo)> {
nativeEvent: {
status: 'success' | 'error';
id: string;
routes: RouteInfo<T>[];
};
}
export interface CameraPosition {
zoom: number;
tilt: number;
azimuth: number;
point: Point;
}
showUserPosition?: boolean
- Π΅ΡΠ»ΠΈ false, ΡΠΎ Π½Π΅ Π±ΡΠ΄ΡΡ ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°ΡΡΡΡ ΠΈ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°ΡΡΡΡ Π³Π΅ΠΎΠ΄Π°Π½Π½ΡΠ΅ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠ½Π°ΡΠ΅Π½ΠΈΠ΅ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ truenightMode: boolean
- ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΠΆΠΈΠΌ. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ - falseuserLocationIcon: ImageSource
- ΠΈΠΊΠΎΠ½ΠΊΠ° ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ. ΠΠΎΡΡΡΠΏΠ½Ρ ΡΠ΅ ΠΆΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΡΡΠΎ ΠΈ Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Image ΠΈΠ· react nativeonCameraPositionChange?: (event: NativeSyntheticEvent<CameraPosition>) => void
- ΠΊΠΎΠ»Π±Π΅ΠΊ Π½Π° ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΌΠ΅ΡΡonMapPress?: (event: NativeSyntheticEvent<Point>) => void
- ΡΠΎΠ±ΡΡΠΈΠ΅ Π½Π°ΠΆΠΈΡΠΈΡ Π½Π° ΠΊΠ°ΡΡΡ. ΠΠ΅ΡΠ΅Π΄Π°Π΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΡΠΊΠΈ Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π½Π°ΠΆΠ°Π»ΠΈonMapLongPress?: (event: NativeSyntheticEvent<Point>) => void
- ΡΠΎΠ±ΡΡΠΈΠ΅ Π΄ΠΎΠ»Π³ΠΎΠ³ΠΎ Π½Π°ΠΆΠΈΡΠΈΡ Π½Π° ΠΊΠ°ΡΡΡ. ΠΠ΅ΡΠ΅Π΄Π°Π΅Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΡΠΊΠΈ Π½Π° ΠΊΠΎΡΠΎΡΡΡ Π½Π°ΠΆΠ°Π»ΠΈchildren: Marker | Polygon | Polyline | Circle
- ΡΠΌ ΡΠ°Π·Π΄Π΅Π» "ΠΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ - ΠΏΡΠΈΠΌΠΈΡΠΈΠ²ΠΎΠ²"userLocationAccuracyFillColor?: string
- ΡΠ²Π΅Ρ ΡΠΎΠ½Π° Π·ΠΎΠ½Ρ ΡΠΎΡΠ½ΠΎΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡuserLocationAccuracyStrokeColor?: string
- ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ Π·ΠΎΠ½Ρ ΡΠΎΡΠ½ΠΎΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡuserLocationAccuracyStrokeWidth?: number
- ΡΠΎΠ»ΡΠΈΠ½Π° Π·ΠΎΠ½Ρ ΡΠΎΡΠ½ΠΎΡΡΠΈ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ·ΠΈΡΠΈΠΈ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»Ρ
-
fitAllMarkers
- ΠΏΠΎΠ΄ΠΎΠ±ΡΠ°ΡΡ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΌΠ΅ΡΡ, ΡΡΠΎΠ±Ρ Π²ΠΌΠ΅ΡΡΠΈΡΡ Π²ΡΠ΅ ΠΌΠ°ΡΠΊΠ΅ΡΡ (Π΅ΡΠ»ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ) -
setCenter(center: { lon: number, lat: number }, zoom: number = 10, azimuth: number = 0, tilt: number = 0, duration: number = 0, animation: Animation = Animation.SMOOTH)
- ΡΡΡΠ°Π½Π°Π²Π»ΠΈΠ²Π°Π΅Ρ ΠΊΠ°ΠΌΠ΅ΡΡ Π² ΡΠΎΡΠΊΡ Ρ Π·Π°Π΄Π°Π½Π½ΡΠΌ zoom, ΠΏΠΎΠ²ΠΎΡΠΎΡΠΎΠΌ ΠΏΠΎ Π°Π·ΠΈΠΌΡΡΡ ΠΈ Π½Π°ΠΊΠ»ΠΎΠ½ΠΎΠΌ ΠΊΠ°ΡΡΡ (tilt
). ΠΠΎΠΆΠ½ΠΎ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΈΠ·ΠΎΠ²Π°ΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΡ: Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΠΈ ΡΠΈΠΏ. ΠΡΠ»ΠΈ Π΄Π»ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΡ ΡΡΡΠ°Π½ΠΎΠ²ΠΈΡΡ 0, ΡΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄ Π±ΡΠ΄Π΅Ρ Π±Π΅Π· Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ. ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΡΠ΅ ΡΠΈΠΏΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΉAnimation.SMOOTH
ΠΈAnimation.LINEAR
-
setZoom(zoom: number, duration: number, animation: Animation)
- ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΡΠ΅ΠΊΡΡΠΈΠΉ zoom ΠΊΠ°ΡΡΡ. ΠΠ°ΡΠ°ΠΌΠ΅ΡΡΡduration
ΠΈanimation
ΡΠ°Π±ΠΎΡΠ°ΡΡ ΠΏΠΎ Π°Π½Π°Π»ΠΎΠ³ΠΈΠΈ ΡsetCenter
-
getCameraPosition(callback: (position: CameraPosition) => void)
- Π·Π°ΠΏΡΠ°ΡΠΈΠ²Π°Π΅Ρ ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°ΠΌΠ΅ΡΡ ΠΈ Π²ΡΠ·ΡΠ²Π°Π΅Ρ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΡΠΉ ΠΊΠΎΠ»Π±Π΅ΠΊ Ρ ΡΠ΅ΠΊΡΡΠΈΠΌ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅ΠΌ -
findRoutes(points: Point[], vehicles: Vehicles[], callback: (event: RoutesFoundEvent) => void)
- Π·Π°ΠΏΡΠΎΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ² ΡΠ΅ΡΠ΅Π· ΡΠΎΡΠΊΠΈpoints
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ°vehicles
. ΠΡΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΡΡΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π²ΡΠ·Π²Π°Π½callback
Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΎΠ±ΠΎ Π²ΡΠ΅Ρ ΠΌΠ°ΡΡΡΡΡΠ°Ρ (ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ "ΠΠ°ΠΏΡΠΎΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ²") -
findMasstransitRoutes(points: Point[], callback: (event: RoutesFoundEvent<MasstransitInfo>) => void): void
- Π·Π°ΠΏΡΠΎΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ² Π½Π° Π»ΡΠ±ΠΎΠΌ ΠΎΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ΅ -
findPedestrianRoutes(points: Point[], callback: (event: RoutesFoundEvent<MasstransitInfo>) => void): void
- Π·Π°ΠΏΡΠΎΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡΡΡΡΠ° -
findDrivingRoutes(points: Point[], callback: (event: RoutesFoundEvent<DrivingInfo>) => void): void
- Π·Π°ΠΏΡΠΎΡ ΠΌΠ°ΡΡΡΡΡΠ° Π΄Π»Ρ Π°Π²ΡΠΎΠΌΠΎΠ±ΠΈΠ»Ρ
-
ΠΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ ΠΊΠ°ΡΡ ΡΡΠΈΠ»ΠΈΠ·ΡΠ΅ΡΡΡ, ΠΊΠ°ΠΊ ΠΈ View ΠΈΠ· react-native. ΠΡΠ»ΠΈ ΠΊΠ°ΡΡΠ° Π½Π΅ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ, ΠΏΠΎΡΠ»Π΅ ΠΈΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·Π°ΡΠΈΠΈ Ρ Π²Π°Π»ΠΈΠ΄Π½ΡΠΌ ΠΊΠ»ΡΡΠ΅ΠΌ ΠΠΠ, Π²Π΅ΡΠΎΡΡΠ½ΠΎ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΏΡΠΎΠΏΠΈΡΠ°ΡΡ ΡΡΠΈΠ»Ρ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΏΠΈΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° (height+width ΠΈΠ»ΠΈ flex)
-
ΠΡΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ· js (ΡΠ΅ΡΠ΅Π· require('./img.png')) Π² Π΄Π΅Π±Π°Π³Π΅ ΠΈ ΡΠ΅Π»ΠΈΠ·Π΅ Π½Π° Π°Π½Π΄ΡΠΎΠΈΠ΄Π΅ ΠΌΠΎΠ³ΡΡ Π±ΡΡΡ ΡΠ°Π·Π½ΡΠ΅ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΌΠ°ΡΠΊΠ΅ΡΠ°. Π ΡΠ΅ΠΊΡΡΠ΅ΠΉ Π²Π΅ΡΡΠΈΠΈ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΡΡΡ ΡΠ΅Π½Π΄Π΅Ρ Π² ΡΠ΅Π»ΠΈΠ·Π½ΠΎΠΉ ΡΠ±ΠΎΡΠΊΠ΅. ΠΡΠ΄Π΅Ρ ΠΈΡΠΏΡΠ°Π²Π»Π΅Π½ΠΎ Π² ΡΠ»Π΅Π΄ΡΡΡΠΈΡ ΡΠ΅Π»ΠΈΠ·Π°Ρ
import { Marker } from 'react-native-yamap';
...
<YaMap>
<Marker point={{lat: 50, lon: 50}}/>
</YaMap>
interface MarkerProps {
scale?: number; // ΠΌΠ°ΡΡΡΠ°Π±ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΠ°. ΠΠ΅ ΡΠ°Π±ΠΎΡΠ°Π΅Ρ Π΅ΡΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ children Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠ°
point: Point; // ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΡΠΎΡΠΊΠΈ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ°ΡΠΊΠ΅ΡΠ°
source?: ImageSource; // Π΄Π°Π½Π½ΡΠ΅ Π΄Π»Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΌΠ°ΡΠΊΠ΅ΡΠ°
children?: React.ReactElement; // ΡΠ΅Π½Π΄Π΅Ρ ΠΌΠ°ΡΠΊΠ΅ΡΠ° ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° (Π½Π΅ ΡΠ΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡΠ΅ΡΡΡ)
onPress?: () => void;
anchor: { x: number, y: number }; // Π―ΠΊΠΎΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΠΌΠ°ΡΠΊΠ΅ΡΠ°. ΠΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ ΠΏΡΠΈΠ½ΠΈΠΌΠ°ΡΡ Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΎΡ 0 Π΄ΠΎ 1. ΠΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ { x: 0.5, y: 0.5 } - ΡΠ΅Π½ΡΡ ΠΈΠΊΠΎΠ½ΠΊΠΈ ΡΠΊΠ°Π·ΡΠ²Π°Π΅Ρ Π½Π° ΡΠΎΡΠΊΡ Ρ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΠ°ΠΌΠΈ point
zIndex?: number;
}
import { Circle } from 'react-native-yamap';
...
<YaMap>
<Circle center={{lat: 50, lon: 50}} radius={300} />
</YaMap>
interface CircleProps {
center: Point; // ΡΠ΅Π½ΡΡ ΠΊΡΡΠ³Π°
radius: number; // ΡΠ°Π΄ΠΈΡΡ ΠΊΡΡΠ³Π° Π² ΠΌΠ΅ΡΡΠ°Ρ
fillColor?: string; // ΡΠ²Π΅Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ
strokeColor?: string; // ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ
strokeWidth?: number; // ΡΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ
zIndex?: number;
onPress?: () => void;
}
import { Polyline } from 'react-native-yamap';
...
<YaMap>
<Polyline points={[
{lat: 50, lon: 50},
{lat: 50, lon: 20},
{lat: 20, lon: 20},
]}/>
</YaMap>
interface PolylineProps {
strokeColor?: string; // ΡΠ²Π΅Ρ Π»ΠΈΠ½ΠΈΠΈ
outlineColor?: string; // ΡΠ²Π΅Ρ ΠΎΠ±Π²ΠΎΠ΄ΠΊΠΈ
strokeWidth?: number; // ΡΠΎΠ»ΡΠΈΠ½Π° Π»ΠΈΠ½ΠΈΠΈ
outlineWidth?: number; // ΡΠΎΠ»ΡΠΈΠ½Π° ΠΎΠ±Π²ΠΎΡΠΊΠΈ (0 ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ)
dashLength?: number; // Π΄Π»ΠΈΠ½Π° ΡΡΡΠΈΡ
Π°
dashOffset?: number; // ΠΎΡΡΡΡΠΏ ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΡΡΡΠΈΡ
Π° ΠΎΡ Π½Π°ΡΠ°Π»Π° ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½ΠΈΠΈ
gapLength?: number; // Π΄Π»ΠΈΠ½Π° ΡΠ°Π·ΡΡΠ²Π° ΠΌΠ΅ΠΆΠ΄Ρ ΡΡΡΠΈΡ
Π°ΠΌΠΈ (0 ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ - ΡΠΏΠ»ΠΎΡΠ½Π°Ρ Π»ΠΈΠ½ΠΈΡ)
points: Point[]; // ΠΌΠ°ΡΡΠΈΠ² ΡΠΎΡΠ΅ΠΊ Π»ΠΈΠ½ΠΈΠΈ
zIndex?: number;
onPress?: () => void;
}
import { Polygon } from 'react-native-yamap';
...
<YaMap>
<Polygon points={[
{lat: 50, lon: 50},
{lat: 50, lon: 20},
{lat: 20, lon: 20},
]}/>
</YaMap>
interface PolygonProps {
fillColor?: string; // ΡΠ²Π΅Ρ Π·Π°Π»ΠΈΠ²ΠΊΠΈ
strokeColor?: string; // ΡΠ²Π΅Ρ Π³ΡΠ°Π½ΠΈΡΡ
strokeWidth?: number; // ΡΠΎΠ»ΡΠΈΠ½Π° Π³ΡΠ°Π½ΠΈΡΡ
points: Point[]; // ΡΠΎΡΠΊΠΈ ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π°
innerRings: (Point[])[]; // ΠΌΠ°ΡΡΠΈΠ² ΠΏΠΎΠ»ΠΈΠ»ΠΈΠ½ΠΈΠΉ, ΠΊΠΎΡΠΎΡΡΠ΅ ΠΎΠ±ΡΠ°Π·ΡΡΡ ΠΎΡΠ²Π΅ΡΡΡΠΈΡ Π² ΠΏΠΎΠ»ΠΈΠ³ΠΎΠ½Π΅
zIndex?: number;
onPress?: () => void;
}
ΠΠ°ΡΡΡΡΡΡ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΏΡΠΎΡΠΈΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΌΠ΅ΡΠΎΠ΄ findRoutes
ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° YaMap
(ΡΠ΅ΡΠ΅Π· ref).
findRoutes(points: Point[], vehicles: Vehicles[], callback: (event: RoutesFoundEvent) => void)
- Π·Π°ΠΏΡΠΎΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ² ΡΠ΅ΡΠ΅Π· ΡΠΎΡΠΊΠΈ points
Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ° vehicles
. ΠΡΠΈ ΠΏΠΎΠ»ΡΡΠ΅Π½ΠΈΠΈ ΠΌΠ°ΡΡΡΡΡΠΎΠ² Π±ΡΠ΄Π΅Ρ Π²ΡΠ·Π²Π°Π½ callback
Ρ ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΠ΅ΠΉ ΠΎΠ±ΠΎ Π²ΡΠ΅Ρ
ΠΌΠ°ΡΡΡΡΡΠ°Ρ
.
Π Π½Π°ΡΡΠΎΡΡΠ΅Π΅ Π²ΡΠ΅ΠΌΡ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ ΡΠ»Π΅Π΄ΡΡΡΠΈΠ΅ ΡΠΎΡΡΠ΅ΡΡ ΠΈΠ· Yandex MapKit:
- masstransit - Π΄Π»Ρ ΠΌΠ°ΡΡΡΡΡΠΎΠ² Π½Π° ΠΎΠ±ΡΠ΅ΡΡΠ²Π΅Π½Π½ΠΎΠΌ ΡΡΠ°Π½ΡΠΏΠΎΡΡΠ΅
- pedestrian - Π΄Π»Ρ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π½ΡΡ ΠΌΠ°ΡΡΡΡΡΠΎΠ²
- driving - Π΄Π»Ρ ΠΌΠ°ΡΡΡΡΡΠΎΠ² Π½Π° Π°Π²ΡΠΎΠΌΠΎΠ±ΠΈΠ»Π΅
Π’ΠΈΠΏ ΡΠΎΡΡΠ΅ΡΠ° Π·Π°Π²ΠΈΡΠΈΡ ΠΎΡ ΠΏΠ΅ΡΠ΅Π΄Π°Π½Π½ΠΎΠ³ΠΎ Π² ΡΡΠ½ΠΊΡΠΈΡ ΠΌΠ°ΡΡΠΈΠ²Π° vehicles
:
- Π΅ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ ΠΏΡΡΡΠΎΠΉ ΠΌΠ°ΡΡΠΈΠ² (
this.map.current.findRoutes(points, [], () => null);
), ΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½PedestrianRouter
- Π΅ΡΠ»ΠΈ ΠΏΠ΅ΡΠ΅Π΄Π°Π½ ΠΌΠ°ΡΡΠΈΠ² Ρ ΠΎΠ΄Π½ΠΈΠΌ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠΌ
'car'
(this.map.current.findRoutes(points, ['car'], () => null);
), ΡΠΎ Π±ΡΠ΄Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½DrivingRouter
- Π²ΠΎ Π²ΡΠ΅Ρ
ΠΎΡΡΠ°Π»ΡΠ½ΡΡ
ΡΠ»ΡΡΠ°ΡΡ
ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ
MasstransitRouter
Π’Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π½ΡΠΆΠ½ΡΠΉ ΡΠΎΡΡΠ΅Ρ, Π²ΡΠ·Π²Π°Π² ΡΠΎΠΎΡΠ²Π΅ΡΡΡΠ²ΡΡΡΡΡ ΡΡΠ½ΠΊΡΠΈΡ
findMasstransitRoutes(points: Point[], callback: (event: RoutesFoundEvent) => void): void;
findPedestrianRoutes(points: Point[], callback: (event: RoutesFoundEvent) => void): void;
findDrivingRoutes(points: Point[], callback: (event: RoutesFoundEvent) => void): void;
Π Π·Π°Π²ΠΈΡΠΈΠΌΠΎΡΡΠΈ ΠΎΡ ΡΠΈΠΏΠ° ΡΠΎΡΡΠ΅ΡΠ° ΠΈΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ ΠΌΠ°ΡΡΡΡΠ°Ρ ΠΌΠΎΠΆΠ΅Ρ Π½Π΅Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ.
import { Geocoder } from 'react-native-yamap';
Geocoder.init('API_KEY');
API_KEY
Π΄Π»Ρ Π°ΠΏΠΈ Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ° ΠΈ Π΄Π»Ρ ΠΊΠ°ΡΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ. ΠΠ½ΠΈΡΠΈΠ°Π»ΠΈΠ·ΠΈΡΠΎΠ²Π°ΡΡ Π½Π°Π΄ΠΎ ΠΎΠ±Π° ΠΊΠ»Π°ΡΡΠ°, ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠΎ ΡΠ²ΠΎΠΈΠΌ ΠΊΠ»ΡΡΠ΅ΠΌ.
Geocoder.geocode(geocode: Point, kind?: ObjectKind, results?: number, skip?: number, lang?: Lang);
ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ° ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ΅ΡΠ° Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ° Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
Geocoder.geoToAddress(geo: Point);
ΠΠ΅ΡΠ½Π΅Ρ null
ΠΈΠ»ΠΈ ΠΎΠ±ΡΠ΅ΠΊΡ Π°Π΄ΡΠ΅ΡΠ° (ΡΡΡΠΎΠΊΠΎΠ²ΠΎΠ΅ Π·Π½Π°ΡΠ΅Π½ΠΈΠ΅, ΠΏΠΎΡΡΠΎΠ²ΡΠΉ ΠΈΠ½Π΄Π΅ΠΊΡ ΠΈ ΠΌΠ°ΡΡΠΈΠ² ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠ² Π°Π΄ΡΠ΅ΡΠ°) ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ°.
interface Address {
country_code: string;
formatted: string;
postal_code: string;
Components: {kind: string, name: string}[];
}
Geocoder.reverseGeocode(geocode: string, kind?: ObjectKind, results?: number, skip?: number, lang?: Lang, rspn?: 0 | 1, ll?: Point, spn?: [number, number], bbox?: [Point, Point]);
ΠΠ°Π·Π½Π°ΡΠ΅Π½ΠΈΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠΎΠ² ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡΡΠ΅ΡΡ Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ° ΠΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΎΡΠ΅ΡΠ° Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ° Π² Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ
Geocoder.addressToGeo(address: string);
ΠΠ΅ΡΠ½Π΅Ρ null
ΠΈΠ»ΠΈ ΠΊΠΎΠΎΡΠ΄ΠΈΠ½Π°ΡΡ {lat: number, lon: number}
ΠΏΠ΅ΡΠ²ΠΎΠ³ΠΎ ΠΎΠ±ΡΠ΅ΠΊΡΠ° ΠΈΠ· ΠΏΡΠ΅Π΄Π»ΠΎΠΆΠ΅Π½ΠΈΠΉ Π³Π΅ΠΎΠΊΠΎΠ΄Π΅ΡΠ°.