vue2-google-maps

Introduction

google map을 vue2에서 사용할 수 있게 해주는 라이브러리

• 지원 Component List: https://github.com/xkjyeah/vue-google-maps?tab=readme-ov-file#officially-supported-components 
  • 그외 gmap Component는 별도로 만들어서 사용해야 한다.
    예시) https://github.com/xkjyeah/vue-google-maps/blob/vue2/examples/overlay.html 
    참고: https://developers.google.com/maps/documentation/javascript/groundoverlays 
• Web Examples: https://xkjyeah.github.io/vue-google-maps/ 

GroundOverlay Custom Component 구조 설명

• 위에 https://github.com/xkjyeah/vue-google-maps/blob/vue2/examples/overlay.html  링크를 보면 조금 난해하다.

• https://github.com/xkjyeah/vue-google-maps?tab=readme-ov-file#adding-your-own-components  여기에 다른 컴포넌트이긴 하지만 주석이 달려 있으니 이 2개를 참고하면 된다.

• 먼저 GroundOverlay 컴포넌트에 대해 살펴봐야 하는데 https://developers.google.com/maps/documentation/javascript/reference/image-overlay#GroundOverlay  를 봐보면, GroundOverlay는 (url, bounds [, opts])를 파라미터로 받는 것을 확인할 수 있다.

• 그래서 ctrArgs 항목이 아래와 같이 되는 것이다.

  ctrArgs: (options, {source, bounds}) => [source, bounds, options],

Gmap 관련

check current Google map version

async mounted() {
  this.$refs.mapRef.$mapPromise.then((map) => {
    console.log(google.maps.version) // ⇐
  })
}

Marker Animation

https://developers.google.com/maps/documentation/javascript/markers?hl=ko#animate 

• 마커에 애니메이션 적용
• 다양한 상황에서 동적인 움직임을 보이도록 마커에 애니메이션을 적용할 수 있습니다. 마커에 애니메이션이 적용되는 방식을 지정하려면 마커의 animation 속성(google.maps.Animation 유형)을 사용하세요. 다음과 같은 Animation 값이 지원됩니다.
• DROP은 마커를 처음 지도에 배치할 때 지도 상단에서 최종 위치로 떨어져야 함을 나타냅니다. 마커가 멈추면 애니메이션이 중지되고 animation이 null로 돌아갑니다. 이 유형의 애니메이션은 일반적으로 Marker를 생성하는 동안 지정됩니다.
• BOUNCE는 마커가 제자리에서 튀어야 함을 나타냅니다. 튀는 마커는 animation 속성이 명시적으로 null이 될 때까지 계속 튑니다.
• 기존 마커의 경우 Marker 객체에서 setAnimation()을 호출하여 애니메이션을 시작할 수 있습니다.

InfoWindow

https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindowOptions 

GmapCircle

https://developers.google.com/maps/documentation/javascript/reference/polygon?hl=ko#Circle 

interval을 활용한 GmapCircle 점멸 효과

<template>
  <GmapCircle
    :center="center"
    :radius="200"
    :visible="true"
    :options="circleOption"
  />
</template>
 
<script>
export default {
  data() {
    return {
      blinkInterval: null,
      circleOption: {
        strokeColor: '#888888',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#888888',
        fillOpacity: 1,
        clickable: true,
      },
    }
  },
  mounted() {
    // opacity를 활용한 점멸 효과
    this.blinkInterval = setInterval(() => {
      if (this.circleOption.fillOpacity > 0.1) {
        this.circleOption.fillOpacity -= 0.1
      } else {
        this.circleOption.fillOpacity = 1
      }
    }, 500); // 0.5초 간격
  },
  beforeDestroy() {
    if (this.blinkInterval) {
      clearInterval(this.blinkInterval);
    }
  },
}
</script>