[흡구오디] 네이버 지도 위에 마커 표시하기 | 마커 고정하기

이번 단계에서는 addView에서 화면(지도) 정중앙에 마커를 표시한다.

이때 지도가 움직이더라도 마커는 계속 화면 정 중앙에 위치한다.

 

다음화면으로 가는 버튼을 누르면 마커가 가르틴 곳의 위치 정보를 가져온다!

 

그럼 렛츠고

 

우선 지도 이동과 마커를 이해하기 위해선

네이버 지도의 카메라와 마커에 대해 이해해야한다.

 

카메라 변경 이벤트

 

어떤 이유에 의해서건 카메라가 움직이면 카메라 변경 이벤트가 발생합니다. NMFMapView를 사용 중인 뷰 컨트롤러에 NMFMapViewCameraDelegate 프로토콜을 선언하고, -mapView:addCameraDelegate로 등록하면 카메라 변경 이벤트를 받을 수 있습니다. 카메라의 위치가 변경되면 -mapView:cameraIsChangingByReason: 콜백 메서드가 호출됩니다.

 

-> 여기서 알 수 있는 것은 델리게이트 선언해야한다!

 

마커 추가 및 삭제

 

NMFMarker는 일반적인 클래스 객체처럼 생성할 수 있습니다. 객체를 생성하고, position 속성에 좌표를 지정한 후, mapView 속성에 지도 객체를 지정하면 마커가 나타납니다. 단, mapView를 지정하기 전에는 반드시 position을 지정해야 하며, 그렇지 않으면 마커가 지도에 추가되지 않습니다.

 

-> 여기서 알 수 있는 것은 마커의 첫 위치를 지정해줘야 마커가 나타난다!

 

그렇게 완성한 코드

//
//  AddViewController.swift
//  SmokingAreaOdi
//
//  Created by 이상지 on 7/16/25.
//
import NMapsMap

import UIKit


class AddViewController: UIViewController, NMFMapViewCameraDelegate {
  
  private let addView = AddView()
  let marker = NMFMarker()

  
  override func loadView() {
    view = addView
  }
  
  override func viewDidLoad() {
    super.viewDidLoad()
    self.navigationItem.title = "흡연구역 추가"
    
    //카메라 델리게이트 등록해야함
    addView.mapView.addCameraDelegate(delegate: self)
    
    // 마커 기본 속성(특히 첫 위치 지정해줘야 나타남)
    marker.position = addView.mapView.cameraPosition.target // 카메라 중앙에 마커 첫 위치 지정
    marker.mapView = addView.mapView //지도에 올리기
  }
}

 

결과는?

 

오 가운데에 마커가 등장했다.

 

하지만 문제점 발생

지도를 움직였을 때 마커가 따라간다...😱

가지마...

 

마커가 중앙에 고정되도록 해결해보자!

 

문제가 생겼을 때는 피해가는 것도 방법..^^

 

그냥 마커를 하나 생성해서 맵뷰 위에 올렸다!

func setMarker() {
    let markerCoordinate = UIImageView(image: UIImage(named: "marker_Pin"))
    
    markerCoordinate.translatesAutoresizingMaskIntoConstraints = false
    //view.addSubview(markerCoordinate)
    mapView.addSubview(markerCoordinate)
    NSLayoutConstraint.activate([
      markerCoordinate.centerXAnchor.constraint(equalTo: self.mapView.centerXAnchor),
      markerCoordinate.centerYAnchor.constraint(equalTo: self.mapView.centerYAnchor)
    ])
  }

 

잘 따라오는구만 ㅇㅇ

 

마커가 정중앙에 있는지 확인하기

 

네이버 기본 제공 마커를 정중앙에 위치시켜서 내가 위에서 올려놓은 마커가 정중앙을 찍고 있는지 확인해보자!

 

망함; 다름;

 

근데 제 생각엔 네이버 마커는 점 찍는 곳을 정중앙으로,

커스텀 마커는 마커 이미지의 정중앙을 지도의 정중앙으로 한 것 같은 느낌

 

그럼 커스텀 마커의 맨 하단, 중앙이 지도의 정 가운데 오도록 수정해보자!

 

func setMarker() {
    let markerCoordinate = UIImageView(image: UIImage(named: "marker_Pin"))
    
    markerCoordinate.translatesAutoresizingMaskIntoConstraints = false
    
    mapView.addSubview(markerCoordinate)
    
    NSLayoutConstraint.activate([
      markerCoordinate.centerXAnchor.constraint(equalTo: self.mapView.centerXAnchor),
      //이 부분은 centerY에서 bottom으로 바꿔줌!
      markerCoordinate.bottomAnchor.constraint(equalTo: self.mapView.centerYAnchor)
    ])
  }

 

결과는?

 

맞았다!!!