iOS용 Maps 사용 시작하기

이 문서는 iOS 플랫폼에서 애플리케이션 개발에 대한 기본적인 지식을 갖춘 사용자 대상으로 iOS용 네이버 지도 라이브러리 사용법을 설명합니다. iOS 애플리케이션에서 네이버 지도 라이브러리를 사용하기 위해서는 아래 사항들을 준비해야 합니다.

1. 애플리케이션 클라이언트 아이디 및 Bundle Id 확인

Maps API를 사용하려면 애플리케이션의 Client ID 값과 Bundle Id 값이 필요합니다. Client ID는 애플리케이션을 등록하면 자동으로 발급이 되며, "Bundle Id" 값은 'Application'에서 해당 Application 선택 후 변경 메뉴에서 나타나는 "iOS Bundle ID" 항목에 입력된 값입니다. 애플리케이션의 "Bundle Id"는 [NSBundle mainBundle] bundleIdentifier] 메서드로 확인할 수 있습니다.

2. iOS 네이버 지도 샘플 참고하기샘플 프로젝트를 참고하면 보다 쉽게 지도 라이브러리 사용법을 익힐 수 있습니다. GitHub를 통하여 샘플을 다운로드할 수 있습니다.

프로젝트 생성 및 환경 설정

iOS 프로젝트에서 네이버 지도 라이브러리를 설정하는 방법은 iOS API 호출 예제에서 준비사항을 참고하십시오.

지도 생성

NMapView 객체를 생성합니다. NMapView 객체를 생성한 후, 아래와 같이 애플리케이션 등록 시 발급받은 클라이언트아이디를 설정합니다. NMapView 객체에서 발생하는 상태 변화 및 터치 이벤트 처리를 위한 delegate를 등록합니다. 지도 초기화가 완료되면 아래의 프로토콜이 호출됩니다. 초기화가 성공하면 지도 보기 모드 및 중심 좌표 등을 설정하고 실패하면 적절한 예외 처리를 수행합니다.

Objective-C
- (void)viewDidLoad {
    [super viewDidLoad];
    self.mapView = [[NMapView alloc] initWithFrame:self.view.frame];
    self.navigationController.navigationBar.translucent = NO;

    // set the delegate for map view
    [self.mapView setDelegate:self];

    // set the application api key for Open MapViewer Library
    [self.mapView setClientId:@”YOUR CLIENT ID"];
    [self.view addSubview:self.mapView];
}

- (void) onMapView:(NMapView *)mapView initHandler:(NMapError *)error {
    if (error == nil) { // success
        // set map center and level
        [self.mapView setMapCenter:NGeoPointMake(126.978371, 37.5666091) atLevel:11];
        [self.mapView setMapEnlarged:YES mapHD:YES];
    } else { // fail
        NSLog(@"onMapView:initHandler: %@", [error description]);
}
Swift
override func viewDidLoad() {
    super.viewDidLoad()
    mapView = NMapView(frame: self.view.frame)
    self.navigationController?.navigationBar.isTranslucent = false

    if let mapView = mapView {
        // set the delegate for map view
        mapView.delegate = self

        // set the application api key for Open MapViewer Library
        mapView.setClientId(”YOUR CLIENT ID")
        mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

        view.addSubview(mapView)
    }
}
public func onMapView(_ mapView: NMapView!, initHandler error: NMapError!) {
    if (error == nil) { // success
        // set map center and level
        mapView.setMapCenter(NGeoPoint(longitude:126.978371, latitude:37.5666091), atLevel:11)

        // set for retina display
        mapView.setMapEnlarged(true, mapHD: true)
    } else { // fail
        print("onMapView:initHandler: \(error.description)")
    }
}

네이버 지도앱 실행

지도 뷰어 내부적으로 '네이버 지도앱 실행' 버튼을 고정 노출할 수 있으며 선택 시 네이버 지도앱이 실행됩니다. '네이버 지도앱 실행' 버튼을 노출하려면 NMapView 객체 생성 후 아래와 같이설정합니다.

Objective-C
// enable built in app control
[self.mapView setBuiltInAppControl:YES];
[self.mapView executeNaverMap];
Swift
// enable built in app control
mapView.setBuiltInAppControl(true)
mapView.executeNaverMap()

지도 레이어 변경하기

기본 레이어 변경

일반 지도, 위성 지도, 위성 겹침 지도로 변경하는 코드는 다음과 같다.

Objective-C
[self.mapView setMapViewMode:NMapViewModeVector];
[self.mapView setMapViewMode:NMapViewModeSatellite];
[self.mapView setMapViewMode:NMapViewModeHybrid];
Swift
mapView.mapViewMode = .vector
mapView.mapViewMode = .satellite
mapView.mapViewMode = .hybrid

오버레이 레이어 변경

실시간 교통 지도, 자전거 겹침 지도 보기 코드는 다음과 같다.

Objective-C
self.mapView.mapViewTrafficMode = YES;
self.mapView.mapViewBicycleMode =
Swift
mapView.mapViewTrafficMode = true
mapView.mapViewBicycleMode =

현재 위치 표시하기 및 지도 회전

지도 위에 현재 위치 표시와 나침반에 의한 지도 회전 기능을 구현하려면 아래와 같이 NMapLocationManager 객체를 사용합니다. 현재 위치 및 나침반 각도 변경 시 호출될 delegate를 설정하고 현재 위치 탐색과 나침반 각도 모니터링을 시작합니다.

Objective-C
NMapLocationManager *lm = [NMapLocationManager getSharedInstance];

// set delegate
[lm setDelegate:self];

// start updating location
[lm startContinuousLocationInfo];

[self.mapView setAutoRotateEnabled:YES];
    // start updating heading
    [lm startUpdatingHeading];
}
Swift
if let lm = NMapLocationManager.getSharedInstance() {
    // set delegate
    lm.setDelegate(self)

    // start updating location
    lm.startContinuousLocationInfo()

    mapView?.setAutoRotateEnabled(true, animate: true)

    // start updating heading
    lm.startUpdatingHeading()
}

좌표를 주소로 변환 (Reverse Geocoding)

이 예제에서는 특정 좌표에 해당하는 주소를 구하는 방법을 설명합니다. 좌표-주소 변환은 Web / Mobile SDK / REST API 등 다양한 형태로 제공되며, 제공 방식과 관계 없이 해당 기능을 이용할 경우 각 상품별 요금이 과금됩니다. 해당 상품을 사용하기 위해서는 [사전 준비 사항]을 참고하여 해당 상품을 신청해야 합니다.

사전 준비 사항

지도 라이브러리에서 제공하는 좌표-주소 변환 기능을 사용하려면 다음과 같이 애플리케이션을 등록하고 클라이언트 ID를 발급받아야 합니다.

  1. 콘솔의 AI·Application Service > AI·NAVER API > Application에서 애플리케이션을 등록합니다.(자세한 방법은 "Application 사용 가이드" 참고)
  2. AI·Application Service > AI·NAVER API > Application에서 등록한 애플리케이션을 선택해 Client ID값을 확인합니다.
  3. AI·Application Service > AI·NAVER API > Application변경 화면에서 Reverse Geocoding이 선택되어 있는지 확인합니다. 선택되어 있지 않으면 429 (Quota Exceed)가 발생하니 주의하시기 바랍니다.

사용 방법

아래와 같이 NMapView 초기화 시에 서버 데이터를 전달받을 delegate를 등록해야 합니다. 특정 지점의 좌표를 인자로 아래와 같이 NMapView의 좌표-주소 변환 메서드를 호출합니다. 서버로부터 좌표에 해당하는 주소를 전달받으면 아래의 프로토콜이 호출됩니다.

Objective-C
- (void)viewDidLoad {
    // set delegate to use reverse geocoder API
    [self.mapView setReverseGeocoderDelegate:self];

    // find the place address
    [self.mapView findPlacemarkAtLocation:point];
}

#pragma mark MMapReverseGeocoderDelegate

- (void) location:(NGeoPoint)location didFindPlacemark:(NMapPlacemark *)placemark
{
    NSLog(@"location:(%f, %f) didFindPlacemark: %@", location.longitude, location.latitude,[placemark address]);
}

- (void) location:(NGeoPoint)location didFailWithError:(NMapError *)error
{
    NSLog(@"location:(%f, %f) didFailWithError: %@", location.longitude, location.latitude,[error description]);
}
Swift
override func viewDidLoad() {
    mapView.reverseGeocoderDelegate = self

    // find the place address
    mapView.findPlacemark(atLocation: point)
}

// MARK: - MMapReverseGeocoderDelegate Methods

public func location(_ location: NGeoPoint, didFind placemark: NMapPlacemark!) {
    let address = placemark.address

    print("address:\(address)")
}

public func location(_ location: NGeoPoint, didFailWithError error: NMapError!) {
    print("location:(\(location.longitude), \(location.latitude)) didFailWithError: \
    (error.description)")
}

마커 (Marker) 그리기

지도 위에 여러 개의 마커(Marker) 아이템을 하나의 오버레이 객체에서 관리하기 위한 NMapPOIdataOverlay 객체 생성해야 하며 사용법은 아래와 같습니다.

Objective-C
NMapOverlayManager *mapOverlayManager = [self.mapView mapOverlayManager];
// create POI data overlay
NMapPOIdataOverlay *poiDataOverlay = [mapOverlayManager newPOIdataOverlay];

// POI flag type
int const UserFlagType = NMapPOIflagTypeReserved+1;

[poiDataOverlay initPOIdata:3];
[poiDataOverlay addPOIitemAtLocation:NGeoPointMake(126.979, 37.567) title:@"마커 1"
type:UserFlagType iconIndex:0 withObject:nil];
[poiDataOverlay addPOIitemAtLocation:NGeoPointMake(126.974, 37.566) title:@"마커 2"
type:UserFlagType iconIndex:0 withObject:nil];
[poiDataOverlay addPOIitemAtLocation:NGeoPointMake(126.984, 37.565) title:@"마커 3"
type:UserFlagType iconIndex:0 withObject:nil];
[poiDataOverlay endPOIdata];

// show all POI data
[poiDataOverlay showAllPOIdata];
Swift
if let mapOverlayManager = mapView?.mapOverlayManager {

    // create POI data overlay
    if let poiDataOverlay = mapOverlayManager.newPOIdataOverlay() {

        poiDataOverlay.initPOIdata(3)
        poiDataOverlay.addPOIitem(atLocation: NGeoPoint(longitude: 126.979, latitude: 37.567), title: "마커 1", type: myNMapPOIflagTypePin, iconIndex: 0, with: nil)
        poiDataOverlay.addPOIitem(atLocation: NGeoPoint(longitude: 126.974, latitude: 37.566), title: "마커 2", type: myNMapPOIflagTypePin, iconIndex: 0, with: nil)
        poiDataOverlay.addPOIitem(atLocation: NGeoPoint(longitude: 126.984, latitude: 37.565), title: "마커 3", type: myNMapPOIflagTypePin, iconIndex: 0, with: nil)
        poiDataOverlay.endPOIdata()

        // show all POI data
        poiDataOverlay.showAllPOIdata()
    }

NMapCalloutOverlay 객체 생성
NMapCalloutOverlay 클래스는 오버레이 아이템을 선택했을 때 표시되는 말풍선 오버레이 클래스입니다. 사용자 정의 말풍선 오버레이로 변경하려면 오버레이 아이템 선택 시 호출되는 아래의 프로토콜에서 처리하면 됩니다. 겹친 오버레이 아이템들을 처리하려면 nil을 반환합니다. CalloutOverlay는 UIImage와 UIView 형태로 만들 수 있으며 아래는 Stroyboard에서 UIView를 이용한 샘플 코드입니다.

Objective-C
#pragma mark NMapPOIdataOverlayDelegate

- (UIView *)onMapOverlay:(NMapPOIdataOverlay *)poiDataOverlay viewForCalloutOverlayItem:(NMapPOIitem *)poiItem calloutPosition:(CGPoint *)calloutPosition
{
    calloutPosition->x = roundf((self.calloutView.bounds.size.width)/2) + 1;
    self.calloutLabel.text = @"Hello world";
    return self.calloutView;
}
Swift
func onMapOverlay(_ poiDataOverlay: NMapPOIdataOverlay!, viewForCalloutOverlayItem poiItem:NMapPOIitem!, calloutPosition: UnsafeMutablePointer!) -> UIView! {

    calloutPosition.pointee.x = round(calloutView.bounds.size.width / 2) + 1
    calloutLabel.text = “Hello world”

    return calloutView
}

이동 가능한 마커 (Marker) 그리기

8 번 마커 그리기에서 이동이 가능한 속성을 설정하기 위해서는 아래와 지도 위에 여러 개의 마커(Marker) 아이템을 하나의 오버레이 객체에서 관리하기 위한 NMapPOIdataOverlay 객체 생성해야 하며 사용법은 아래와 같습니다.

Objective-C
- (void) addMarkers {
    NMapOverlayManager *mapOverlayManager = [self.mapView mapOverlayManager];
    // create POI data overlay
    NMapPOIdataOverlay *poiDataOverlay = [mapOverlayManager newPOIdataOverlay];

    [poiDataOverlay initPOIdata:1];
    NMapPOIitem *poiItem = [poiDataOverlay addPOIitemAtLocation:NGeoPointMake(126.979, 37.567)title:@"Touch & Drag to Move" type:UserPOIflagTypeDefault iconIndex:0 withObject:nil];

    // set floating mode
    [poiItem setPOIflagMode:NMapPOIflagModeTouch];
    // hide right button on callout
    [poiItem setHasRightCalloutAccessory:NO];
    [poiDataOverlay endPOIdata];
    // select item
    [poiDataOverlay selectPOIitemAtIndex:0 moveToCenter:YES];
    // show all POI data
    [poiDataOverlay showAllPOIdata];
}

- (CGPoint) onMapOverlay:(NMapPOIdataOverlay *)poiDataOverlay calloutOffsetWithType:(NMapPOIflagType)poiFlagType {
    return CGPointZero;
}
Swift
func addMarker() {
    if let mapOverlayManager = mapView?.mapOverlayManager {
        // create POI data overlay
        if let poiDataOverlay = mapOverlayManager.newPOIdataOverlay() {

            poiDataOverlay.initPOIdata(1)
            let poiItem = poiDataOverlay.addPOIitem(atLocation: NGeoPoint(longitude:126.979, latitude: 37.567), title: "Touch & Drag to Move", type: UserPOIflagTypeDefault,iconIndex: 0, with: nil)

            // set floating mode
            poiItem?.setPOIflagMode(.touch)
            // hide right button on callout
            poiItem?.hasRightCalloutAccessory = valse
            poiDataOverlay.endPOIdata()
            // select item
            poiDataOverlay.selectPOIitem(at: 0, moveToCenter: true)
            // show all POI data
            poiDataOverlay.showAllPOIdata()
        }
    }
}
open func onMapOverlay(_ poiDataOverlay: NMapPOIdataOverlay!, calloutOffsetWithType poiFlagType: NMapPOIflagType) -> CGPoint {
    return CGPoint.zero
}

폴리라인 그리기

지도 위에 폴리라인을 그리기 위해서는 NMapPathDataOverlay 객체를 생성해야 하며 사용 방법은 아래와 같이 구현합니다.

Objective-C
NMapOverlayManager *mapOverlayManager = [self.mapView mapOverlayManager];

// set path data points
NMapPathData *pathData1 = [[NMapPathData alloc] initWithCapacity:9];

[pathData1 initPathData];
[pathData1 addPathPointLongitude:127.108099 latitude:37.366034
lineType:NMapPathLineTypeSolid];

[pathData1 addPathPointLongitude:127.108088 latitude:37.366043 lineType:0];

[pathData1 addPathPointLongitude:127.108079 latitude:37.365619 lineType:0];

[pathData1 addPathPointLongitude:127.107458 latitude:37.365608 lineType:0];

[pathData1 endPathData];

[pathDataOverlay showAllPathData];
Swift
if let mapOverlayManager = mapView?.mapOverlayManager {
    // set path data points
    if let pathData = NMapPathData.init(capacity: 9) {

        pathData.initPathData()

        pathData.addPathPointLongitude(127.108099, latitude: 37.366034, lineType: .solid)
        pathData.addPathPointLongitude(127.108088, latitude: 37.366043, lineType: .none)
        pathData.addPathPointLongitude(127.108079, latitude: 37.365619, lineType: .none)
        pathData.addPathPointLongitude(127.107458, latitude: 37.365608, lineType: .none)

        pathData.end()

        // create path data overlay
        if let pathDataOverlay = mapOverlayManager.newPathDataOverlay(pathData) {
            pathDataOverlay.showAllPathData()
        }
    }
}

폴리곤 그리기

지도 위에 폴리곤을 그리기 위해서는 NMapPathDataOverlay 객체를 생성해야 하며 사용 방법은 아래와 같이 구현합니다. 폴리라인 그리기와 코드가 동일하나 NMapPathLineStyle 클래스의 setPathDataType 메서드에 NMapPathDataTypePolygon로 설정해야 합니다.

Objective-C
NMapOverlayManager *mapOverlayManager = [self.mapView mapOverlayManager];

// set path data points
NMapPathData *pathData1 = [[NMapPathData alloc] initWithCapacity:9];

[pathData1 initPathData];
[pathData1 addPathPointLongitude:127.108099 latitude:37.366034lineType:NMapPathLineTypeSolid];

[pathData1 addPathPointLongitude:127.108088 latitude:37.366043 lineType:0];
[pathData1 addPathPointLongitude:127.108079 latitude:37.365619 lineType:0];
[pathData1 addPathPointLongitude:127.107458 latitude:37.365608 lineType:0];

[pathData1 endPathData];

NMapPathLineStyle *style = [[NMapPathLineStyle alloc] init];
[style setPathDataType:NMapPathDataTypePolygon];
[style setLineColor:[UIColor greenColor]];
[style setFillColor:[UIColor blueColor]];
[pathData1 setPathLineStyle:style];
Swift
if let mapOverlayManager = mapView?.mapOverlayManager {
    // Add path data with polygon type
    if let pathData = NMapPathData.init(capacity: 9) {

        pathData.initPathData()
        pathData.addPathPointLongitude(127.108099, latitude: 37.366034, lineType: .solid)
        pathData.addPathPointLongitude(127.108088, latitude: 37.366043, lineType: .none)
        pathData.addPathPointLongitude(127.108079, latitude: 37.365619, lineType: .none)
        pathData.addPathPointLongitude(127.107458, latitude: 37.365608, lineType: .none)
        pathData.end()

        // set path line style
        let pathLineStyle = NMapPathLineStyle()
        pathLineStyle.pathDataType = .polygon
        pathLineStyle.lineColor = .green
        pathLineStyle.fillColor = .blue
        pathData.pathLineStyle = pathLineStyle

        // create path data overlay
        if let pathDataOverlay = mapOverlayManager.newPathDataOverlay(pathData) {
            pathDataOverlay.showAllPathData()
        }
    }
}

원 그리기

지도 위에 폴리곤을 그리기 위해서는 NMapPathDataOverlay 객체를 생성해야 하며 사용 방법은 아래와 같이 구현합니다.

  • addCirclePointLongitude 메서드에서 원의 중심좌표와 반경 (미터단위)를 입력합니다.
Objective-C
NMapOverlayManager *mapOverlayManager = [self.mapView mapOverlayManager];

// set path data points
NMapCircleData *circleData1 = [[NMapCircleData alloc] initWithCapacity:1];
[circleData1 initCircleData];
[circleData1 addCirclePointLongitude:127.1085 latitude:37.3675 radius:50.0F];

// set circle style
NMapCircleStyle *circleStyle1 = [[NMapCircleStyle alloc] init];
[circleStyle1 setLineType:NMapPathLineTypeDash];
[circleData1 setCircleStyle:circleStyle1];
[circleData1 endCircleData];

[pathDataOverlay addCircleData:circleData1];
Swift
if let mapOverlayManager = mapView?.mapOverlayManager {
    if let pathDataOverlay = mapOverlayManager.newPathDataOverlay(NMapPathData()) {

    // add circle data
    if let circleData = NMapCircleData(capacity: 1) {

        circleData.initCircleData()
        circleData.addCirclePointLongitude(127.1085, latitude: 37.3675, radius: 50.0)
        circleData.end()

        // set circle style
        if let circleStyle = NMapCircleStyle() {
            circleStyle.setLineType(.dash)
            circleData.circleStyle = circleStyle
        }
    pathDataOverlay.add(circleData)
    }
}

""에 대한 건이 검색되었습니다.

    ""에 대한 검색 결과가 없습니다.

    처리중...