[iOS] KakaoMap 마커 커스터마이징

이전 게시물에 이어서 KakaoMap을 이용해서 마커 커스터 마이징을 해보고자 한다!

KakaoMap 이용하기가 궁금하다면?

https://org9899.tistory.com/94

[iOS] KakaoMap 이용하기

게시물 참고 바란다!

 

이제부터는 마커를 커스터마이징 해보고, 확대 기능을 넣어볼까 한다!

https://swimme.tistory.com/1

[swift] 카카오 맵 api 사용해보기

https://roniruny.tistory.com/171

[iOS] KakaoMap API 써보기

위 티스토리를 참고해서 만들어봤다!

 

이미지 커스터 마이징 코드는 생각보다 간단하다!

poiItem1?.markerType = MTMapPOIItemMarkerType.customImage
poiItem1?.customImageName = "에셋에 저장된 이미지 이름"

 

저번 게시물을 보면 알겠지만 지도의 범위가 너무 넓게 나온다!

그 범위를 줄이려면 아래 코드를 추가해주면 된다! 

 mapView.setMapCenter(MTMapPoint(geoCoord: DEFAULT_POSITION1), zoomLevel: 0, animated: true)

 

마커를 눌렀을때 말풍선이 나오게 하고싶으면 아래를 추가해주자! 

poiItem1?.itemName = "세종대학교 대양AI센터"

 

아 참고로 경도 찾는 사이트가 따로있다! 카카오맵을 이용해서 위도, 경도를 찾을 수 있는데,

https://map.kakao.com/

카카오맵

https://xn--yq5bk9r.com/blog/map-coordinates

지도 위도 경도

찾는 방법은 극악무도하게 간단하다! 

 

찾고자하는 위치를 찾고, 상단 우측에 내보내기 버튼을 눌러 URL 복사를 해주면 된다! 

복사한 URL을 입력해주면 나온당! 

 

[전체코드]

import UIKit

public let DEFAULT_POSITION1 = MTMapPointGeo(latitude: 37.55084892824633, longitude: 127.07551820008577)

class FirstTabViewController: UIViewController, MTMapViewDelegate{
    
    var mapView: MTMapView?
    
    var mapPoint1: MTMapPoint?
    var poiItem1: MTMapPOIItem?
    
    var mapPoint2: MTMapPoint?
    var poiItem2: MTMapPOIItem?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 지도 불러오기
        mapView = MTMapView(frame: self.view.bounds)
        
        if let mapView = mapView {
            mapView.delegate = self
            mapView.baseMapType = .standard
        
            // 지도 중심점, 레벨
            mapView.setMapCenter(MTMapPoint(geoCoord: DEFAULT_POSITION1), zoomLevel: 0, animated: true)
            
            // 마커 추가
            self.mapPoint1 = MTMapPoint(geoCoord: MTMapPointGeo(latitude: 37.55084892824633, longitude: 127.07551820008577))
            self.mapPoint2 = MTMapPoint(geoCoord: MTMapPointGeo(latitude: 37.54990522391498, longitude: 127.07466624750248))
            
            poiItem1 = MTMapPOIItem()
            poiItem1?.markerType = MTMapPOIItemMarkerType.customImage
            poiItem1?.customImageName = "characterExample4Small"
            poiItem1?.mapPoint = mapPoint1
            //poiItem1?.itemName = "세종대학교 대양AI센터"
            mapView.add(poiItem1)
            
            poiItem2 = MTMapPOIItem()
            poiItem2?.markerType = MTMapPOIItemMarkerType.customImage
            poiItem2?.customImageName = "characterExample4Small"
            poiItem2?.mapPoint = mapPoint2
            //poiItem2?.itemName = "세종대학교 세종관"
            mapView.add(poiItem2)
            
            self.view.addSubview(mapView)
            
        }
    }
}

 

[결과화면]

 

다양한 기능을 더 추가하고싶다면? (ex. 확대/추가 기능 등)

https://iosminjae.tistory.com/15

[IOS][SWIFT] 카카오맵(Kakao Map) 커스텀하기!(현재위치, 마커 메소드화)

https://www.youtube.com/watch?v=J5oJUXJNmg8