[MU] vue.js - 대한민국 지도 svg 불러오기

프로젝트에서 대한민국 지도를 클릭해 진행해야하는 부분이 있어

대한민국 지도에서 지역별 선택이 가능하도록 구현해보자

 

1. svg 파일 받아오기

아래 사이트에서 해당하는 국가에 대한 svg 파일을 다운로드 받을 수 있다.

Free SVG Maps - amCharts

나는 High detail로 설치를 받았다.

 

2. 프로젝트 적용

프로젝트에 src/assets/svg 경로에 korea-map.svg 파일을 저장 후 우클릭 -> Open with -> Text Editor 로 열게 되면 지도 지역별 path 요소들이 나타난다.

 

나는 이 요소들을 regions.js 파일에 따로 정의하여 HomeView.vue에 적용하였다.

export default [
    {
        id: 'Seoul',
        name: '서울',
        path: 'M132.666,290.394L133...',
    },
    // 다른 지역 쭉 추가하기
]

 

HomeView.vue

<template>
  <div class="home">
    <h1>Project 🗺️</h1>
    <div class="map-container">
      <svg
        viewBox="0 0 800 1000"
        class="korea-map"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          v-for="region in regions"
          :key="region.id"
          :d="region.path"
          :class="['region', { hovered: hoveredRegion === region.id }]"
          @mouseenter="handleMouseEnter($event, region.id)"
          @mouseleave="hoveredRegion = null"
          @click="handleRegionClick(region.name)"
        />
      </svg>
    </div>
  </div>
</template>

• svg : 대한민국 전체 지도가 SVG 형태로 그려져 있고, <path> 요소들이 각 지역을 나타냄
• v-for : regions 배열을 반복하여 각 지역마다 <path>를 생성
• :d="region.path" : 지역의 경로 데이터를 path에 바인딩 / 지역의 모양
• :class : hoveredRegion과 현재 region의 id를 비교해서 hover 스타일을 적용
• @mouseenter : 마우스를 올렸을 때 이벤트 실행

<script>
import regions from '@/assets/regions';

export default {
  name: 'HomeView',
  data() {
    return {
      hoveredRegion: null,
      regions,
    };
  },
  methods: {
  handleRegionClick(name) {
    alert(`${name} 지역을 클릭했습니다!`);
  },
  handleMouseEnter(event, regionId) {
    this.hoveredRegion = regionId;
  },
}
};
</script>

• handleRegionClick(name) : 특정 지역을 클릭했을 때 해당 지역 이름을 알림창
• handleMouseEnter(event, regionId) : 마우스를 올린 지역의 ID를 hoveredRegion에 저장하여 스타일 적용

구현 화면

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."