[React Native] Map 활용

2020-05-27

React Native

Nadan
Nadan Dev Blog

Map

생각 포인트

map과 location은 다른 주제임
Map은 뷰라서 Context를 안 사용할 줄 알았는데 사용하는 게 나은 듯. 어쨌든 컴포넌트니까. 이게 무조건 안 써야지 이렇게 생각하지 말고, 활용을 먼저 살펴보자
map에서 region이랑 initialRegioN이랑 둘 다 쓸 필요 없이 initialRegion으로 해도 될 듯

Docs

검색

참고자료

설치

yarn install react-native-maps

초기 위치

map delta 값은 0.005가 괜찮음

const Map = () => {
    return (
        <MapView 
            style={styles.map}
            initialRegion={{
                latitude: 37.33233,
                longitude: -122.03121,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
            }}
        />
    );
};

위치 이동

initialRegion은 초기 세팅될 때 위치고 이후 움직이는 위치는 region으로 이동하면 됨

위도/경도 ↔ 거리

move one meter by latitude

Approximate Metric Equivalents for Degrees, Minutes, and Seconds

지도 위 도형 그리기

Polyline

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

const Map = () => {

    let points = [];
    for (let i = 0; i < 20; i++) {
        points.push({
            latitude: 37.33233 + i * 0.001,
            longitude: -122.03121 + i * 0.001
        })
    }

    return (
        <MapView 
            style={styles.map}
            initialRegion={{
                latitude: 37.33233,
                longitude: -122.03121,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
            }}>
            <Polyline coordinates={points} />
        </MapView>
    );
};

Circle

<MapView 
    style={styles.map}
    initialRegion={{
        ...currentLocation.coords,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01
}}>
    <Circle 
        center={currentLocation.coords}
        radius={120}
        strokeColor="rgba(158, 158, 255, 1.0)"
        fillColor="rgba(158, 158, 255, 0.3)"
    />
</MapView>

지도 언어 바꾸기

그냥 시스템 언어를 바꾸면 됨