[React] 카카오맵 사용하기 With. 타입스크립트 - (2) 마커 출력하기

 

 

마커를 넣어보자!

 

 

---

 

1. 마커 1개 넣어보자

import React, { useEffect } from 'react'
import styled from 'styled-components'

declare global {
  interface Window {
    kakao: any
  }
}

const Map = styled.div`
  width: 100%;
  height: 300px;
`

function MapContainer() {
  const addMarker = () => {
    const markerPosition = new window.kakao.maps.LatLng(33.450701, 126.570667)

    return new window.kakao.maps.Marker({
      position: markerPosition,
    })
  }

  useEffect(() => {
    const container = document.getElementById('map')
    const options = {
      center: new window.kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심 좌표
      level: 3, // 지도의 레벨(확대, 축소 정도)
    }

    const map = new window.kakao.maps.Map(container, options)
    addMarker().setMap(map)
  }, [])

  return <Map id="map" />
}

export default MapContainer

 

 

2. 마커를 여러개 넣어보자

import React, { useEffect } from 'react'
import styled from 'styled-components'

declare global {
  interface Window {
    kakao: any
  }
}

const Map = styled.div`
  width: 100%;
  height: 300px;
`

function MapContainer() {
  const markers: any[] = [
    new window.kakao.maps.LatLng(33.45023, 126.572965),
    new window.kakao.maps.LatLng(33.455529, 126.561838),
  ]

  const setMarkers = (map: any) => {
    markers.forEach((obj) => {
      new window.kakao.maps.Marker({
        map: map,
        position: obj,
        title: '테스트',
      })
    })
  }

  const init = (map: any) => {
    window.kakao.maps.event.addListener(
      map,
      'click',
      function (mouseEvent: any) {
        // 클릭한 위치에 마커를 표시합니다
        console.log(mouseEvent.latLng)
      },
    )
  }

  useEffect(() => {
    const container = document.getElementById('map')
    const mainPosition = new window.kakao.maps.LatLng(33.453502, 126.569894)
    const options = {
      center: mainPosition, // 지도의 중심 좌표
      level: 5, // 지도의 레벨(확대, 축소 정도)
    }

    const mainMarker = new window.kakao.maps.Marker({
      position: mainPosition,
    })

    const map = new window.kakao.maps.Map(container, options)

    init(map)
    mainMarker.setMap(map) // 메인 위치 set
    setMarkers(map) // 마커 배열 set
  }, [])

  return <Map id="map" />
}

export default MapContainer

 

 

완성!

 

 

 

---

 

 

 

출처

https://apis.map.kakao.com/web/sample/basicMarker/

https://apis.map.kakao.com/web/sample/multipleMarkerControl/

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.