動作環境
対象 | バージョン |
---|---|
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 メソッド内に、緯度・経度を設定する処理を実装します。
- CLLocationCoordinate2DMake メソッドは、緯度・経度を設定するメソッドです。
- 詳細は、CLLocationCoordinate2DMake(公式) を参照してください。
// 東京駅の位置情報を設定(緯度: 35.681236 経度: 139.767125)
let latitude = 35.681236
let longitude = 139.767125
// 緯度・軽度を設定
let location = CLLocationCoordinate2DMake(latitude, longitude)
// マップビューに緯度・軽度を設定
mapView.setCenter(location, animated:true)
縮尺を設定
viewDidLoad メソッド内に、以下の処理を実装します。
- MKCoordinateRegion は、緯度と経度を中心とした長方形の地理的領域です。
- 詳細は、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)
}
}