Vue3.0, Google Maps API 를 사용한 일본 여행지도 만들기

2달전에 만들어놓고 블로그 작성을 깜박해버렸습니다. 다시 기억을 되살려서...

이 프로젝트는 다음과 같은 목표가 있습니다

 

 

1. google maps 를 vue3-google-map 라이브러리 없이 만들어보기 

일본 도쿄 지하철 노선도에 따른 위치를 보여주고 거기에 주변 맛집도 보여주려면

주변 장소정보를 지원하지 않는 vue3-google-map 라이브러리 없이 google maps만 사용해야 했습니다.

 

 

2. vue 3.0 버전과 거기에 맞는 vuex 4.0 사용해보기

예전에 만든 북스토어에는 vue 2버전과 vuetify를 사용하여 구현을 했었지만!

하지만 이제는 vue 3버전이 공식적으로 출시되었고 Emit, multiple root, setup 함수 등 

다양하고 편리한 기능이 추가되었습니다. vue 2버전을 사용할 이유가 없습니다.

 

 

3. 간단하게 필요한 기능만 만들기

이전에는 너무 다양한 기능이 다양한 컴포넌트에 꼬여서 통신했습니다.

이번에는 vuex의 모듈을 나눠 컴포넌트에서 가져오는 방식으로 데이터를 가져옵니다.

물론 아주 간단하고 적은 기능을 구현합니다!

 

 

---

 

사용 버전

vue 3.2.13

vuex 4.1.0

vue-router 4.1.6

 

 

---

 

 

다음은 주요 4가지 컴포넌트입니다

1. 도쿄 노선도를 보여주는 JPStation 

여기서 역을 선택하면 아래의 google maps 에서 해당 위치로 이동합니다

선택한 값은 vuex의 station 모듈에 담깁니다

지금은 JY, JB 두 개의 노선도 밖에 없지만,  각 노선도를 선택하면 해당 테마의 색으로 변경됩니다

노선도는 assets 디렉토리에 다음과 같은 json 형태로 저장되어있습니다.

// JB.json
[
    {
        "name_ja": "東京",
        "name_ko": "도쿄",
        "name_en": "Tōkyō",
        "code": "TKO",
        "lat": 35.6812,
        "lng": 139.7671,
        "prev": "神田",
        "prev_en" : "Kanda",
        "next": "有楽町",
        "next_en": "Yūrakuchō",
        "num" : "01"
      },
  ]

 

json파일을 assets 디렉토리에 등록하면 파일 이름으로 버튼이 생성되고, 해당 파일의 위치값을 읽어 지도에 표시됩니다

 

 

2. 지도와 주변 정보를 가져오는 Google Maps

위에서 담은 station의 lat, lng 값을 사용하여 해당역의 지도와 주변정보를 받아옵니다.

이 때 주변정보는 vuex의 places 모듈에 담깁니다

 

 

3. Station Sign 은 일본 도쿄 지하철 간판입니다

아래의 실제 도쿄역 간판을 보고 만들었습니다

https://namu.wiki/w/%EB%8F%84%EC%BF%84%EC%97%AD

위에서 선택한 역 정보를 vuex에서 가져와서 간판을 뿌려줍니다

이 쓸대없는 기능은 왜 넣었냐면.. 제가 넣고싶어서 넣었습니다

 

 

4. rightNav 컴포넌트는 추천정보를 표시합니다

Google Maps에서 받아온 주변정보를 vuex에서 가져와 뿌려줍니다.

이 컴포넌트는 이름을 바꿀 필요가 있겠네요