(vuejs) vue-daum-map에서 template 내부에 직접 좌표를 입력받는 방법, marker 생성하는 방법

`<template>`
...
`<div class="mapApiWrap">`
`<vue-daum-map
                  :appKey="appKey"
                  :center.sync="center"
                  :level.sync="level"
                  :mapTypeId="mapTypeId"
                  :libraries="libraries"
                  @load="onLoad"
                  @center_changed="onMapEvent('center_changed', $event)"
                  @zoom_start="onMapEvent('zoom_start', $event)"
                  @zoom_changed="onMapEvent('zoom_changed', $event)"
                  @bounds_changed="onMapEvent('bounds_changed', $event)"
                  @click="onMapEvent('click', $event)"
                  @dblclick="onMapEvent('dblclick', $event)"
                  @rightclick="onMapEvent('rightclick', $event)"
                  @mousemove="onMapEvent('mousemove', $event)"
                  @dragstart="onMapEvent('dragstart', $event)"
                  @drag="onMapEvent('drag', $event)"
                  @dragend="onMapEvent('dragend', $event)"
                  @idle="onMapEvent('idle', $event)"
                  @tilesloaded="onMapEvent('tilesloaded', $event)"
                  @maptypeid_changed="onMapEvent('maptypeid_changed', $event)"
                  style="width:100%;height:100%;"
                >`
                `</vue-daum-map>`
`</div>`
...
`</template>`

`<script>`
`import VueDaumMap from "vue-daum-map";`

`export default {
  components: {
    VueDaumMap
  },
  data: function() {
    return {
      center: { lat: 37.5411, lng: 127.068 },
      level: 3,
      mapTypeId: VueDaumMap.MapTypeId.NORMAL,
      libraries: [],
      mapObject: null
    };
  }
}`

vue-daum-map 을 이용하여 다음과 같이 구현을 하였는데요,

  1. data에서 center에 정의한 좌표값을 <template> 안의 <vue-daum-map> 내에서 직접 입력하려면 어떻게 해야할까요??
  2. vue-daum-map을 이용하여 marker를 구현하는 방법이 없을까요?
<template>
  <div id="app">
    <vue-daum-map
      :appKey="appKey"
      :center="{lat:33.450701, lng:126.570667}"
      :level.sync="level"
      :mapTypeId="mapTypeId"
      :libraries="libraries"
      @load="onLoad"
      @update:center="center=$event" 
      style="width:500px;height:400px;"/>
  </div>
</template>

<script>
/* global kakao */
// kakao 네임스페이스를 사용하기 위헤서 위 주석을 사용해야 함.
// 아니면 eslint 옵션을 수정해야 함

import VueDaumMap from 'vue-daum-map'

export default {
  name: 'app',
  data: () => ({
    appKey: 'APP_KEY',
    // 여기에서 값으로 바인딩 하지않고 template의 prop(center)으로 바로 할당
    //center: {lat:33.450701, lng:126.570667}, 
    level: 3,
    mapTypeId: VueDaumMap.MapTypeId.NORMAL,
    libraries: [],
    map: null
  }),
  components: {
    VueDaumMap
  },
  methods: {
    onLoad (map) {
      this.map = map;

      // kakao.maps 네임스페이스로 바로 접근
      new kakao.maps.Marker({
        //position: new kakao.maps.LatLng(33.450701, 126.570667),
        position: map.getCenter(), 
        map: map
      });
    }
  }
}
</script>

제가 만든 컴포넌트가 아니기 때문에 확답은 못드리겠지만 해 본 결과로는,

  1. center값을 바인딩해서 쓰지 않고 오브젝트 형태로 그대로 넣어주면 됩니다.

  2. 위의 코드가 vue에서의 일반적인 Marker 사용입니다.
    따로 vue로 만든 마커 객체가 없기 때문에 직접 네임스페이스를 접근해서 사용해야 합니다.

1개의 좋아요