React native 학습 제11장: MapView

annotations [{latitude: number, longitude: number, animateDrop: bool, title: string, subtitle: string, hasLeftCallout: bool, hasRightCallout: bool, onLeftCalloutPress: function, onRightCalloutPress: function, id: string}]

지도상의 표시점은 제목과 부제목이 있을 수 있다.

legalLabelInsets {top: number, left: number, bottom: number, right: number}

지도상 라벨의 합법적인 범위.기본값은 맵 아래쪽 왼쪽에 있습니다.자세한 내용은 EdgeInsetsPropType.js 을 참조하십시오.

mapType enum('standard', 'satellite', 'hybrid')

표시할 지도 유형입니다.

standard: 표준 도로지도(기본값).

satellite: 위성 보기.

hybrid: 위성 보기와 도로와 흥미로운 점 표시를 첨부합니다.

maxDelta number

표시할 수 있는 최대 영역 치수입니다.

minDelta number

표시할 수 있는 최소 영역 치수입니다.

overlays [{coordinates: [{latitude: number, longitude: number}], lineWidth: number, strokeColor: ColorPropType, fillColor: ColorPropType, id: string}]

지도의 커버층.

onAnnotationPress function

사용자가 지도의 표시를 클릭하면 이 리셋 함수를 한 번 호출합니다.

onRegionChange function

사용자가 지도를 끌 때 이 리셋 함수를 계속 호출합니다.

onRegionChangeComplete function

사용자가 지도를 끌어당기는 것을 멈추면 이 리셋 함수를 한 번 호출합니다.

pitchEnabled bool

이 속성이 true로 설정되어 있고 지도에 효과적인 렌즈가 연결되어 있을 때 렌즈의 들어올림 각도는 지도의 평면을 기울게 한다.이 속성을 false 로 설정하면 렌즈의 들어올리기 각도는 무시되고 지도는 영원히 내려다보기 각도로 표시됩니다.

region {latitude: number, longitude: number, latitudeDelta: number, longitudeDelta: number}

지도가 표시된 구역.
영역은 중앙의 좌표와 표시할 범위를 사용하여 정의됩니다.

rotateEnabled bool

이 속성이 true로 설정되고 지도에 유효한 렌즈가 연결되면 렌즈의 방향 각도는 중심점을 바탕으로 지도 평면을 회전하는 데 사용된다.이 속성이 false 로 설정되면 방향 각도는 무시되고 지도는 항상 상단 방향이 정북방으로 표시됩니다.

scrollEnabled bool

이 속성이 false 이면 사용자가 지도에 표시된 영역을 변경할 수 없습니다.기본값은 true 입니다.

showsUserLocation bool

이 속성이 true인 경우 응용 프로그램은 사용자의 현재 위치를 요청하고 이 위치에 초점을 맞춥니다.기본값은 false 입니다.
주의: 당신은 Info에 있어야 합니다.plist에 NSLocationWhenInUseUsageDescription 필드가 추가됩니다.그렇지 않으면 아무런 힌트도 없이 실패할 것이다!

style View#style

zoomEnabled bool

이 속성이 false인 경우 사용자는 맵을 회전/축소할 수 없습니다.기본값은 true 입니다.

active bool

showsCompass bool

이 속성이 false 이면 맵에 나침반이 표시되지 않습니다.기본값은 true 입니다.

showsPointsOfInterest bool

이 속성이 false 이면 관심 있는 점이 지도에 표시되지 않습니다.기본값은 true 입니다.

'use strict';

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  MapView,
} from 'react-native'
const styles=StyleSheet.create({
  map:{
    marginTop:64,
    height:350,
    margin:10,
    borderWidth:1,
    borderColor:'#000000',
  }
});
class  testMapView extends Component {
   render(){
     return(
       {}}
          region={{
            latitude: 40.027737,
            longitude:116.403694,
            latitudeDelta: 1,
            longitudeDelta: 0.5,
          }}
          annotations={[{
            longitude: 116.403694,
            latitude: 40.027737,
            title: 'I am Here!',
          }]}
         
          />
     );
   }

}
AppRegistry.registerComponent('TestMapView', () => testMapView);