マニュアル - NAVER CLOUD PLATFORM

2018年11月13日にMobile Dynamic Map 3.0バージョンが発売される運びとなり、従来の2.0バージョンは、2019年12月31日付けでサービスのご提供を終了させていただく予定です。2020年1月からは、Mobile Dynamic Map 2.0バージョンのご利用の際、マップの初期画面でエラーメッセージが表示され、機能をご利用いただけませんので、ご了承ください。

そのため、2019年12月31日までは、Mobile Dynamic Map 2.0バージョンと3.0バージョンとを一緒にご利用いただけますが、2020年1月1日からは、2.0バージョンは終了となり、新たな3.0バージョンのみのご利用となりますので、2.0バージョンの終了前にバージョンの切り替えをお願いいたします。

Mobile Dynamic Map 2.0バージョンから3.0バージョンに移行するための詳しいガイドは、以下のリンクをご参照ください。

※ サービスの終了日程

Mobile Dynamic Map SDK 2.0バージョンの新規ダウンロードの終了日：2019年8月1日

Mobile Dynamic Map 2.0バージョンのサービス終了日：2020年1月1日

※ サービス移行(マイグレーション)ガイド

Androidマイグレーション説明書

iOSマイグレーション説明書

iOS用のMapsの使用を始める

このドキュメントはiOSプラットフォームでアプリケーション開発に関する基本知識を持ったユーザーを対象に、iOS用のNAVER Mapライブラリの使用方法について説明します。iOSアプリケーションでNAVER Mapライブラリを使用するためには次のような準備が必要です。

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 NAVER Mapサンプルをご参考のサンプルプロジェクトを参考すれば、より簡単に地図ライブラリの使用方法を習うことができます。GitHubを使ってサンプルをダウンロードできます。

GitHubの使用
https://github.com/navermaps/maps.ios

プロジェクトの作成および環境設定

iOSプロジェクトでNAVER Mapライブラリを設定する方法は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)")
    }
}

NAVER Mapアプリの実行

地図ビューア内部的に'NAVER Mapアプリ実行'ボタンを固定して表示でき、選択するとNAVER Mapアプリが実行されます。'NAVER Mapアプリ実行'ボタンを表示するためにはNNMapViewオブジェクトを作成した後、次のように設定します。

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の発行を受けなければなりません。

コンソールのAI·Application Service > AI·NAVER API > Applicationでアプリケーションを登録します。(詳しい方法は"Application使用ガイド"をご参考)
AI·Application Service > AI·NAVER API > Applicationで登録したアプリケーションを選択し、Client IDの値を確認します。
AI·Application Service > AI·NAVER API > Applicationの変更画面でReverse Geocodingが選択されているかを確認します。選択されていない場合は429(Quota Exceed)が発生するので、ご注意ください。

使用方法

次のようにNMapView初期化の際にサーバデータが転送されるdelegateを登録しなければなりません。特定の地点の座標を因子にして次のようにNMapActivityの座標‐住所変換メソッドを呼び出します。サーバから座標に該当する住所が転送されると、次のプロトコルが呼び出されます。

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)アイテムを1つのオーバーレイオブジェクトで管理するための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)アイテムを1つのオーバーレイオブジェクトで管理するための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)
    }
}

iOS用のMapsの使用を始める

1. アプリケーションのクライアントアイディおよびBundle Idの確認

2. iOS NAVER Mapサンプルをご参考のサンプルプロジェクトを参考すれば、より簡単に地図ライブラリの使用方法を習うことができます。GitHubを使ってサンプルをダウンロードできます。

プロジェクトの作成および環境設定

地図の作成

Objective-C

Swift

NAVER Mapアプリの実行

Objective-C

Swift

地図のレイヤーの変更

基本レイヤーの変更

Objective-C

Swift

オーバーレイレイヤーの変更

Objective-C

Swift

現在の位置表示および地図の回転

Objective-C

Swift

座標を住所に変換(Reverse Geocoding)

事前準備

使用方法

Objective-C

Swift

マーカー(Marker)を描く

Objective-C

Swift

Objective-C

Swift

移動可能なマーカー(Marker)を描く

Objective-C

Swift

ポリラインを描く

Objective-C

Swift

ポリゴンを描く

Objective-C

Swift

サークルを描く

Objective-C

Swift

に対する検索結果は～件です。 ""

に対する検索結果がありません。 ""

処理中...

サイト情報