[Swift/Study] KakaoMap 여러가지 기능 구현해보기 1

저번 글에서 카카오 맵의 기본기를 적용했었다.

https://eunduk2.tistory.com/39

[Swift/Study] Kakao Map API 적용해보기

 

추가로 여러가지 기능을 공부해보고 실습해 보았다!

 

첫번째로 나의 위치를 가져와서 마커를 찍고 그 위치로 이동하는 기능이다.

위치 권한을 얻을 수 있게 info.plist에 필요한 키를 추가해주고

아래 코드를 작성한다.

// 내 위치로 트래킹
func trackMyLocation() {
    // 사용자 위치에 마커 찍기
    mapView.showCurrentLocationMarker = true
    // 사용자 위치로 지도가 이동, 사용자가 움직이면 지도도 따라감
    mapView.currentLocationTrackingMode = .onWithoutHeading
}

위 함수를 발동하면 자신의 위치에 마커가 찍히고 지도가 해당 위치로 이동한다.

그리고 사용자가 움직이면 지도도 움직인다.

 

 

결과 화면

 

 

다음으로는 마커를 터치하면 말풍선이 생기는데

이 말풍선을 새로운 뷰로 커스텀하고 터치하면 다른 뷰로 넘어가는 액션을 주었다.

 

아래 함수를 통해 롯데월드 핀을 생성하였다.

간단한 뷰에 레이블을 추가했고 poiItem.customCalloutBalloonView에 할당하여

핀의 말풍선을 커스텀 뷰로 설정하였다.

// 핀 생성
func createPin(itemName: String, mapPoint: MTMapPoint, markerType: MTMapPOIItemMarkerType) {
    let poiItem = MTMapPOIItem()
    poiItem.itemName = "\(itemName)"
    poiItem.mapPoint = mapPoint
    poiItem.markerType = markerType

    // 커스텀 뷰를 생성하여 버튼을 추가
    let customCalloutView = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
    customCalloutView.backgroundColor = .white

    // 뷰에 레이블을 추가하고 itemName출력
    let label = UILabel(frame: CGRect(x: 0, y: 0, width: 100, height: 50))
    label.textColor = .black
    label.textAlignment = .center
    label.text = "\(itemName)"

    customCalloutView.addSubview(label)

    // 커스텀 콜아웃 뷰 설정
    poiItem.customCalloutBalloonView = customCalloutView

    mapView.addPOIItems([poiItem])
}

 

델리게이트 패턴으로 아래 함수를 구현한다.

임시로 만든 웹뷰를 담고 있는 컨트롤러를 푸시하는 동작을 한다.

// 말풍선을 터치했을 때 액션
func mapView(_ mapView: MTMapView!, touchedCalloutBalloonOf poiItem: MTMapPOIItem!) {
    // 웹뷰를 담고 있는 컨트롤러를 푸시
    let ViewController2 = storyboard!.instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
    navigationController?.pushViewController(ViewController2, animated: true)
}

 

 

결과 화면

 

 

마지막으로 스테퍼를 통해 확대 축소 기능을 구현해 보겠다.

 

스테퍼의 플러스 버튼을 누르면 확대되고 마이너스 버튼을 누르면 축소되게 하였다.

확대 레벨 값이 작아져야 확대가 된다.

var zoomLv:Double = 0.0

@IBAction func onStepper(_ sender: UIStepper) {
    if(zoomLv < sender.value) { // + 버튼 터치시 확대
        mapView.setZoomLevel(mapView.zoomLevel - 1, animated: true)
    } else { // - 버튼 터치시 축소
        mapView.setZoomLevel(mapView.zoomLevel + 1, animated: true)
    }
    zoomLv = sender.value
}

 

 

결과 화면

여기까지 몇 개의 기능을 실습해 보았다.

추가적으로 구현해 보고 싶은 기능을 구현해 보고 다음 글에서 정리하도록 하겠다!