[JavaScript/Vue] 구글 맵(Google Map) 마커

관련 글

1. [JavaScript/Vue] 구글 맵(Google Map) 튜토리얼
2. [JavaScript/Vue] 구글맵(Google Map) 마커
3. [JavaScript/Vue] 구글맵(Google Map) 반경(Circle)
4. [JavaScript/Vue] 구글맵(Google Map) 행정 구역 Polygon 파일 만들기 - 1. 위치 정보 json 파일 준비하기
5. [JavaScript/Vue] 구글맵(Google Map) 행정 구역 Polygon 파일 만들기 - 2. QGIS로 원하는 구역 추출하기
6. [JavaScript/Vue] 구글맵(Google Map) 행정 구역 Polygon 파일 만들기 - 3. Vue에 Polygon 생성하기

 

---

 

목차

1. 마커 추가하기

 

2. 마커 이미지로 바꾸기

 

3. 마커 애니메이션 효과

 

 

---

참고사항

'[JavaScript/Vue] 구글 맵 튜토리얼' 과정에서 추가된 내용입니다. 

---

 

 

1. 마커 추가하기

<gmap-map> 내부에 <gmap-marker>를 사용합니다. v-for를 이용하여 locationsMarkers 안에 있는 경로를 표시하도록 설정했습니다.

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>

 

그리고 <script>의 locationsMarkers 안에 경로를 넣어 두면 다음과 같은 결과 화면이 나옵니다.

<script>
var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      center: seoul,
      locationMarkers: [
        {
          position: seoul
        }
      ],
      locPlaces: [],
      existingPlace: null
    };
  }, 
};
</script>

 

마커 클릭 시 center 위치를 마커로 표시하려면 @click 이벤트를 설정하면 됩니다.

* 현재 center가 마커의 위치로 표시되어 있으면 작동되지 않습니다. *

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>

 

[결과 화면]

 

[AddGoogleMap.vue 전체 코드]

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
 
<script>
var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      center: seoul,
      locationMarkers: [
        {
          position: seoul
        }
      ],
      locPlaces: [],
      existingPlace: null
    };
  }, 
};
</script>

 

 

2. 마커 이미지로 바꾸기

<script>에서 이미지를 다음과 같이 import 합니다.(이미지는 vue 로고 이미지로 사용했습니다.)

<script>
import imgpath from '@/assets/logo.png';
...

 

그리고 img를 다음과 같이 추가해줍니다. 이미지가 커서 사이즈를 20x20으로 바꿨습니다.

<script>
import imgpath from '@/assets/logo.png';

var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      img: {
        url: imgpath,
        scaledSize: { width: 20, height: 20 },
      },
  ...
</script>

 

<template>에 icon을 추가하여 img 항목을 설정합니다.

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :icon=img
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>

 

[결과 화면]

 

[AddGoogleMap.vue 전체 코드]

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :icon=img
        :key="index"
        v-for="(m, index) in locationMarkers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
 
<script>
import imgpath from '@/assets/logo.png';

var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      img: {
        url: imgpath,
        scaledSize: { width: 20, height: 20 },
      },
      center: seoul,
      locationMarkers:[
          {
              position: seoul
          }
      ]
    };
  },
};
</script>

 

 

3. 마커 애니메이션 효과

<gmap-marker>에 animation을 추가합니다. 여기서는 ani라는 것을 변수로 사용하였는데 직접 숫자를 입력해도 상관없습니다. 1번부터 4번까지 순서는 다음과 같습니다.

<template>
  <div>
    <gmap-map
        :zoom="14"    
        :center="center"
        style="width:100%;  height: 600px;"
      >
      <gmap-marker
        :icon=img
        :key="index"
        :animation=ani
        v-for="(m, index) in locationMarkers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
 
<script>
import imgpath from '@/assets/logo.png';

var seoul = { lat: 37.5642135 ,lng: 127.0016985 };
export default {
  name: "AddGoogleMap",
  data() {
    return {
      img: {
        url: imgpath,
        scaledSize: { width: 20, height: 20 },
      },
      ani: 1,
      center: seoul,
      locationMarkers:[
          {
              position: seoul
          }
      ]
    };
  },
};
</script>

    1) Bounce

 

    2) Drop

 

    3) Up

 

    4) Bounce only one