네이버 맵 연동 (사용하기)

요약
네이버맵 연동
Tags
NMap

라이브러리 깃헙 주소

폴리라인, 범위 색상 등 추가 필요사항은 위 깃헙 설명문의 컴포넌트 부근 참조.
 

구현 결과 영상

 

소스코드

  • PNaverMap.js 파일에 별도의 컴포넌트로 구성함.
import React from 'react'
// import NaverMapView, { Circle, Marker, Path, Polyline, Polygon } from "react-native-nmap";
import NaverMapView, {Marker} from 'react-native-nmap'

export function PNaverMap() {
    const P0 = { latitude: 37.564362, longitude: 126.977011 };

    return (
        <NaverMapView style={{ width: '100%', height: '100%' }}
            showsMyLocationButton={true}
            center={{ ...P0, zoom: 16 }}
        onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
        onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
        onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}
        useTextureView
        >

            <Marker coordinate={P0} onClick={() => console.warn('onClick! p0')} />
     
        </NaverMapView>
    );
}