iT 邦幫忙鐵人賽 Day 20: 設定一個 Callout 面板!

使用 Call out 面板取代原有的大頭針吧!

Jeremy Xue
2 min readNov 3, 2018

前言:

上一次教學我們在 App 新增了一張地圖,並且使用大頭針將我們好想工作室的位子給標記了。這次教學我們會使用 MKAnnotationView 來實作一個 Callout 面板,其中有圖片、說明以及一個按鈕,如此一來這個工作室的資訊就清楚的顯示在畫面上,之後也能透過右方的按鈕進行額外的操作。

設定 Callout 面板

首先我們要讓我們 mapViewdelegate 設為 self ,並且我們讓我們 mapView 的 ViewController 遵循 MKMapViewDelegate 協定:

mapView.delegate = self

接著我們實作 mapView(:viewFor:) 方法,並且返回我們的 Callout 面板:

接著我們在 checkDetail 方法撰寫一個顯示 ActionSheet 的方法,讓我們點選這個 Callout 面板的時候能夠執行這個方法,讓我們實際運行看看:

透過 Callout 面板打開 Action Sheet

後記:

希望透過這次教學之後,大家學會如何客製地圖上的 MKAnnotationView,也學到如何調整地圖上的縮放跟移動效果,之後我們也會透過我們這次實作的 Callout 面板來實作更多的功能。

--

--

Jeremy Xue
Jeremy Xue

Written by Jeremy Xue

Hi, I’m Jeremy. [好想工作室 — iOS Developer]

No responses yet