[swift5]iOSアプリで地図機能を実装

8291 ワード
Swift iOS Xcode MapKit Xcode テキストリンク

緯度・経度、縮尺を設定した地図を実装する方法を紹介します！

動作環境

対象 バージョン
iOS 13.3
macOS Catalina 10.15.2
Xcode 11.3.1
Swift 5.1.3

地図を表示

まずは、画面上に地図を表示します。
ここが完了すると、緯度・経度や縮尺を設定しないため、日本地図がすっぽりはまったような地図が表示されます。

ファイル作成

  • Storyboard
    • ここでは、"Map.storyboard" とします
  • ViewController.swift
    • ここでは、"MapViewController.swift" とします

画面を作成

Storyboard に、地図を表示するための MapKit を載っけます。

画面とソースの紐付け

MapKit をソースコード上に紐付けします。

/// 地図を表示するマップビュー
@IBOutlet weak var mapView: MKMapView!

緯度・経度を設定

次に、表示する地図の中心地を設定します。
今回は東京駅を中心とした地図を実装します。

はじめに、MapKit をインポートします。

import MapKit

そしてvi ewDidLoad メソッド内に、緯度・経度を設定する処理を実装します。

// 東京駅の位置情報を設定（緯度: 35.681236 経度: 139.767125）
let latitude = 35.681236
let longitude = 139.767125
// 緯度・軽度を設定
let location = CLLocationCoordinate2DMake(latitude, longitude)
// マップビューに緯度・軽度を設定
mapView.setCenter(location, animated:true)

縮尺を設定

最後に、縮尺を設定する処理を実装します。

viewDidLoad メソッド内に、以下の処理を実装します。

  • MKCoordinateRegion は、緯度と経度を中心とした長方形の地理的領域です。 
// 縮尺を設定
var region = mapView.region
region.center = location
region.span.latitudeDelta = 0.02
region.span.longitudeDelta = 0.02
// マップビューに縮尺を設定
mapView.setRegion(region, animated:true)

ソースコード

import UIKit
import MapKit

/// Map の View
class MapViewController: UIViewController {

    /// 地図を表示するマップビュー
    @IBOutlet weak var mapView: MKMapView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 東京駅の位置情報を設定（緯度: 35.681236 経度: 139.767125）
        let latitude = 35.681236
        let longitude = 139.767125
        // 緯度・軽度を設定
        let location = CLLocationCoordinate2DMake(latitude, longitude)
        // マップビューに緯度・軽度を設定
        mapView.setCenter(location, animated:true)

        // 縮尺を設定
        var region = mapView.region
        region.center = location
        region.span.latitudeDelta = 0.02
        region.span.longitudeDelta = 0.02
        // マップビューに縮尺を設定
        mapView.setRegion(region, animated:true)
    }
}