Kết hợp bản đồ và tính năng định vị địa lý trong các ứng dụng bản địa phản ứng

Bản đồ được tô điểm theo cách của bạn

Cài đặt và Thiết lập

Bắt đầu bằng việc cài đặt các quan hệ phụ thuộc riêng của thư viện và cấu hình nền.

npm install react-native-maps
cd ios && pod install

Nếu bạn đang sử dụng Google Map trên A-rô-bốt, hãy thêm chìa khóa A-đi vào :

<meta-data
 android:name="com.google.android.geo.API_KEY"
 android:value="YOUR_GOOGLE_MAPS_API_KEY" />

Đối với iOS với Google Ánh xạ, thêm chìa khóa tương tự vào hoặc . Hoặc, Apple Maps làm việc ra khỏi hộp mà không cần chìa khóa ADI.

Thành phần sơ đồ cơ bản

Thành phần chính , chấp nhận một để xác định diện tích ban đầu nhìn thấy:

import MapView from 'react-native-maps';

function MapScreen() {
 const region = {
 latitude: 37.78825,
 longitude: -122.4324,
 latitudeDelta: 0.0922,
 longitudeDelta: 0.0421,
 };

 return (
 <MapView style={{ flex: 1 }} region={region} />
 );
}

và điều khiển cấp phóng to. Giá trị lớn hơn hiển thị diện tích rộng hơn.

Thêm dấu và số lần

Các dấu hiệu xác định vị trí trên bản đồ, có thể bao gồm cả tiêu đề và mô tả, được hiển thị như là cuộc gọi khi có người nghe:

import MapView, { Marker, Callout } from 'react-native-maps';

<MapView style={{ flex: 1 }} initialRegion={region}>
 <Marker
 coordinate={{ latitude: 37.78825, longitude: -122.4324 }}
 title="Coffee Shop"
 description="Best espresso in town"
 >
 <Callout>
 <View>
 <Text>Coffee Shop</Text>
 <Text>Best espresso in town</Text>
 </View>
 </Callout>
 </Marker>
</MapView>

Tự chọn

Thay thế huy hiệu đánh dấu mặc định bằng một ô xem riêng bằng lời hứa :

<Marker coordinate={{ latitude: 37.78825, longitude: -122.4324 }}>
 <Image source={require('./custom-pin.png')} style={{ width: 40, height: 40 }} />
</Marker>

Khi đối phó với hàng trăm hay hàng ngàn đánh dấu, hãy tự động sử dụng cụm để cải tiến hiệu suất. Các thư mục như xử lý tự động nhóm và quản lý cấp phóng đại.

Hình vẽ: Đa giác

Để định tuyến, hãy dùng và thành phần:

import MapView, { Polyline, Polygon } from 'react-native-maps';

<MapView>
 <Polyline
 coordinates={[
 { latitude: 37.78825, longitude: -122.4324 },
 { latitude: 37.78900, longitude: -122.4340 },
 ]}
 strokeColor="#000"
 strokeWidth={3}
 />
 <Polygon
 coordinates={[
 { latitude: 37.788, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.432 },
 { latitude: 37.789, longitude: -122.433 },
 ]}
 fillColor="rgba(0, 125, 255, 0.3)"
 strokeColor="blue"
 />
</MapView>

Làm sống động bản đồ

Chương trình di chuyển máy ảnh bằng hoặc ]:

const mapRef = useRef(null);

const moveToLocation = (lat, lng) => {
 mapRef.current.animateToRegion({
 latitude: lat,
 longitude: lng,
 latitudeDelta: 0.01,
 longitudeDelta: 0.01,
 }, 1000); // duration in ms
};

Truy cập vị trí người dùng

Đang cài đặt dịch vụ định vị phản ứng- bảo mật

npm install react-native-geolocation-service
cd ios && pod install

Thư viện đòi hỏi sự cho phép đặt trên cả hai nền tảng. Đối với A- am- am- am- am- am, yêu cầu quyền chạy thời gian bằng hoặc một thư viện tận tụy như . Trên iOS, gồm chìa khóa hoặc .

Sống độc thân

import Geolocation from 'react-native-geolocation-service';

Geolocation.getCurrentPosition(
 (position) => {
 const { latitude, longitude } = position.coords;
 console.log(`User location: ${latitude}, ${longitude}`);
 },
 (error) => {
 console.warn(error.code, error.message);
 },
 { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

Lần theo địa điểm liên tục

Để di chuyển thời gian thực (v.g., theo dõi thể dục), sử dụng ]:

const watchId = Geolocation.watchPosition(
 (position) => {
 setUserLocation(position.coords);
 },
 (error) => console.warn(error),
 { enableHighAccuracy: true, distanceFilter: 5, interval: 3000 }
);

// Later, when no longer needed:
Geolocation.clearWatch(watchId);

Vị trí nền

Để ứng dụng cần cập nhật vị trí ngay cả khi ở nền (v. d., theo dõi giao hàng), cần có thêm các bước cần thiết:

• [FLT: 0] iOS: ) Bật chế độ ) để cập nhật lại ) và kiểm tra “Sự cập nhật cho tập tin. Hãy dùng để cập nhật thân thiện với pin.
• ; Dùng dịch vụ hậu phương với thông báo bền bỉ. Thư viện cung cấp và .

import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
import { Platform } from 'react-native';

const requestLocationPermission = async () => {
 const permission = Platform.select({
 ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
 android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
 });

 const result = await request(permission);
 return result === RESULTS.GRANTED;
};