React #12 리액트로 카카오맵 띄우기

리액트로 카카오맵 띄우기

kakao developers 로그인
내 애플리케이션
해당 애플리케이션 클릭 후 JavaScript 키 복사

그리고 사이트 도메인 localhost로 보내주기

리액트 카카오맵 사이트?

https://react-kakao-maps-sdk.jaeseokim.dev/

스크립트 태그는 html에 적어줌 → index.html

<script
  type="text/javascript"
  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 넣으시면 됩니다.&libraries=services,clusterer"
></script>

설치

npm install react-kakao-maps-sdk

카카오맵으로 유스퀘어 맵 띄우기
(1) API Key 세팅 : script 태그 삽입 => index.html
(2) install : react-kakao-maps-sdk => 터미널
(3) import : Map, MapMarker 등 => 사용 컴포넌트

-Map : 지도 생성
center => 지도 중심 위치, 위도와 경도로 표시
style => 지도 크기
level => 지도 확대 레벨

-MapMarker : 마커 생성
position => 마커위치, 위도와 경도로 표시

import React from 'react'
import {Map,MapMarker} from 'react-kakao-maps-sdk'

const Ex18 = () => {
  return (
    <div>
        <Map level={6} 
            center={{lat:35.15987396299036,lng:126.8797199392423 }} 
            style={{width:'100%',height:'300px'}}>
                
            <MapMarker 
                position={{lat:35.15987396299036,lng:126.8797199392423,}} >
                <div>유스퀘어 버스터미널</div>
            </MapMarker>

        </Map>
    </div>
  )
}

export default Ex18

카카오맵으로 마커 여러개 찍기 실습

마커이미지는 여기 참고
https://react-kakao-maps-sdk.jaeseokim.dev/docs/sample/overlay/basicMarkerImage

(1)카카오 위치 지도 띄우기
(2)마커 여러개 띄우기
(3)마우스 올린 마커만 타이틀 뜨게
(4)버튼 클릭시 스인원 위치로 이동

Ex19.jsx

import React from 'react'
import { useState } from 'react'
import { Map, MapMarker } from 'react-kakao-maps-sdk'
import Ex19Marker from './components/Ex19Marker'

const Ex19 = () => {
    /*
    (1)카카오 위치 지도 띄우기
    (2)마커 여러개 띄우기
    */
    const position = [
        {
            title: "카카오",
            latlng: { lat: 33.450705, lng: 126.570677 },
        },
        {
            title: "생태연못",
            latlng: { lat: 33.450936, lng: 126.569477 },
        },
        {
            title: "텃밭",
            latlng: { lat: 33.450879, lng: 126.56994 },
        },
        {
            title: "근린공원",
            latlng: { lat: 33.451393, lng: 126.570738 },
        },
        {
            title: "동구점",
            latlng : {lat: 35.149896, lng: 126.9197772}
          },
          {
            title : "남구점",
            latlng : {lat: 35.110479, lng: 126.877456}
          }
    ]   

    // 지도의 중심 위치를 나타내는 state생성
    const [center,setCenter] = useState({lat: 33.450701, lng: 126.570667});

    // 지도의 확대레벨을 나타내는 state생성
    const [level,setLevel] = useState(3);

    const smhrdMarker = () => {
        // 지도의 중심 위치 이동
        setCenter(position[4].latlng)
        // 지도 확대 레벨 조정
        setLevel(8)
    }

    return (
        <div>
            <Map level={level}
                center={center}
                style={{ width: '100%', height: '400px' }}>

                {/* {position.map((item,index) =>
                    <MapMarker
                        key={index}
                        position={item.latlng} 
                        onMouseOver={()=>setVisible(true)}
                        >
                        {item.title}
                    </MapMarker>)} */}
                
                {position.map((item)=><Ex19Marker
                    item = {item} key={item}
                ></Ex19Marker>)}
            </Map>
            <button onClick={smhrdMarker}>스마트인재개발원</button>
        </div>
    )
}

export default Ex19

컴포넌트 안에

Ex19Marker.jsx

import React from 'react'
import { useState } from 'react'
import { MapMarker } from 'react-kakao-maps-sdk'

const Ex19Marker = ({item}) => {

    // 마커를 화면에 보여줄 건지 결정하는 state 생성
    const [isVisible,setVisible] = useState(false)

    
  return (
    <div>
        <MapMarker position={item.latlng} 
            image={{
                src: "https://cdn.icon-icons.com/icons2/567/PNG/512/marker_icon-icons.com_54388.png", // 마커이미지의 주소입니다
                size: {
                  width: 45,
                  height: 59,
                }, // 마커이미지의 크기입니다
                options: {
                  offset: {
                    x: 27,
                    y: 69,
                  }, // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
                },
              }}//이미지 태그 끝!
            onMouseOver={()=>setVisible(true)}
            onMouseOut={()=>setVisible(false)}>   
            {/* 마우스를 올릴 때 True-> 타이틀이 보인다 */}
            {isVisible && item.title}
        </MapMarker>

    </div>
  )
}

export default Ex19Marker

여기 위치에서
->버튼 클릭시 스마트인재개발원 위치로 이동
그리고 마커에 마우스 올리면 해당 위치 타이틀이 보인다

리액트 포스팅 끄읏~