Naver map component in Vue.js

Last update: Jul 29, 2022

vue-naver-map

네이버 맵 API의 기본 기능(맵, 마커, 클러스터)을 사용할 수 있습니다. 네이버 맵, 마커 및 클러스터를 컴포넌트로 사용할 수 있으며 각 객체에 접근하려면 선언된 엘리먼트의 ref를 사용해서 접근 가능합니다. 접근성, 편의성을 체크해서 개발중인 상태입니다.

Use

// main.js
import Vue from 'vue'
import VueNaverMap from 'vue-naver-map'
Vue.use(VueNaverMap, {
  key: /* your key, type: String */,
  libraries: ['geocoder'] /* type: Array */
})
<!-- in component -->
<naver-map style="width: 100%; height: 100%;">
  <naver-map-marker-cluster>
    <naver-map-marker />
  </naver-map-marker-cluster>
</naver-map>

Use Naver map service

// Case geocode 
this.$navers.naver.maps.Service.geocode({ query: '덕수궁길 15' }, function(status, response) {
    if (status === this.$navers.naver.maps.Service.Status.ERROR) {
        return alert('Something wrong!');
    }
    console.log(response)
});

Event binding on Map 참고

<!-- in component -->
<naver-map style="width: 100%; height: 100%;" @click="handlerClickMap">
  ...
</naver-map>
/// map event binding
...
methods: {
  handlerClickMap(event) {
    console.log(event)
  }
}
...

Use Nuxt

 // nuxt.config.js
 ...
 plugins: [
   ...
    '~/plugins/naverMap.client.js'
  ],
...
// plugins/naverMap.client.js
import Vue from 'vue'
import VueNaverMap from 'vue-naver-map'
Vue.use(VueNaverMap, {
  key: /* your key, type: String */,
  libraries: ['geocoder'] /* type: Array */
})
<!-- in component -->
<client-only>
  <naver-map style="width: 100%; height: 100%;">
    <naver-map-marker-cluster>
      <naver-map-marker />
    </naver-map-marker-cluster>
  </naver-map>
</client-only>

Marker Sample

<!-- in component -->
<naver-map
  :zoom="10"
  style="width: 100%; height: 100%;"
>
  <naver-map-marker />
  <naver-map-marker :options="markerOptions.imageIcon" />
  <naver-map-marker :options="markerOptions.imageIconScaledSize" />
  <naver-map-marker
    :options="markerOptions.html"
    @click="dialogVisible = !dialogVisible"
  />
  <naver-map-marker :options="markerOptions.animation" />
  <naver-map-marker :options="markerOptions.polygon" />

  <naver-map-marker-cluster @click-cluster="handlerClickCluster">
    <naver-map-marker 
      v-for="n in 30"
      :key="n"
      :options="{
        position: { lat: (37.3 + n * 0.001), lng: 126.9641624 }  
      }"
    />
  </naver-map-marker-cluster>
</naver-map>
// script
export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false,
      markerOptions: {
        imageIcon: {
          position: { lat: 37.2067362, lng: 126.9841624 },
          icon: '/favicon.ico'
        },
        imageIconScaledSize: {
          position: { lat: 37.3237362, lng: 126.9431624 },
          icon: {
            url: '/favicon.ico',
            size: { width: 20, height: 20},
            scaledSize: { width: 20, height: 20},
            origin: { x:0, y:0 },
            anchor: { x: 10, y: 20 }
          }
        },
        html: {
          position: { lat: 37.4037362, lng: 127.1031624 },
          icon: {
            content: `<div class="marker-html">HM</div>`,
            size: { width: 20, height: 20},
            origin: { x:0, y:0 },
            anchor: { x: 10, y: 20 }
          } 
        },
        animation: {
          position: { lat: 37.4337362, lng: 127.0731624 },
          icon: '/favicon.ico',
          animation: 'DROP'
        },
        polygon: {
          position: { lat: 37.4337362, lng: 127.2031624 },
          icon: {
            path: [
              {x: 0, y: 70},
              {x: 20, y: 100},
              {x: 40, y: 70},
              {x: 30, y: 70},
              {x: 70, y: 0},
              {x: 10, y: 70}
            ],
            style: 'closedPath',
            anchor: { x: 23, y: 103 },
            fillColor: '#ff0000',
            fillOpacity: 1,
            strokeColor: '#000000',
            strokeStyle: 'solid',
            strokeWeight: 3
          }
        }
      }
    }
  },
  methods: {
    handlerClickCluster (markers) {
      console.log(markers)
    }
  }
};
/* in style scss */
.marker-html {
    width: 30px;
    height: 30px;
    position: relative;
    background: white;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
    border-radius: 15px;
    border: 1px solid black;
    transition: 0.5s;

    &:hover {
      background-color: black;
      color: white;
      border-color: red;
    }
  }

naver map 사용

<!-- in component -->
<naver-map
  ref="maps"
  :zoom="10"
  style="width: 100%; height: 100%;"
>
  <!-- ... -->
</naver-map>
// script
const map = this.$refs.maps.map
map.setScale(2)

특정 마커 찾아서 변환하기

  <!-- in component -->
  <naver-map
    v-if="mapVisible"
    ref="maps"
    :zoom="10"
    style="width: 100%; height: 100%;"
  >
    <naver-map-marker 
      :options="markerOptions.imageIcon" 
      @click="changeMarkerIcon(markerOptions.imageIcon)" 
    />
  </naver-map>
// script
...
data () {
  return {
    markerOptions: {
      imageIcon: {
        id: 777,
        position: { lat: 37.2067362, lng: 126.9841624 },
        icon: '/favicon.ico' 
      },
      html: {
        icon: {
          content: `<div class="marker-html">HM</div>`,
          size: { width: 20, height: 20},
          origin: { x:0, y:0 },
          anchor: { x: 10, y: 20 }
        } 
      }
    }
  }
},
methdos: {
  changeMarkerIcon(markerOption) {
    const target = this.$refs.maps.map.getMarkerByKey(markerOption, 'id')
    // available -> const target = this.$refs.maps.map.getMarkerByKey(markerOption) // 'id' is default key
    if (target.icon === '/favicon.ico') {
      target.setIcon(this.markerOptions.html.icon)
    } else {
      target.setIcon('/favicon.ico')
    }
  }
}
...

외부 라이브러리

Naver map MarkerClustering.js (Apache License 2.0)
 - 원본경로: https://github.com/navermaps/marker-tools.js/tree/master/marker-clustering
 - 수정사항:
   - 모듈화하여 사용하기위해 해당 라이브러리를 export 할 수 있게 수정.
   - 기타 변경점 없음.

업데이트 로그

2020.07.14 @babel/preset-env 적용
2020.07.14 마커 옵션, 이벤트 바인딩 적용
2020.07.16 라이브러리 호출을 위한 키와 서비스를 모듈 실행부분으로 변경(맵로딩하지 않아도 this.$navers.naver 으로 라이브러리 접근 가능)
2020.07.16 맵 컴포넌트의 이벤트 바인딩 적용
2020.10.05 maps ref에서 맵에 존재하는 marker를 특정할 수 있게 적용
2021.05.27 클러스터 클릭 emit 추가

GitHub

https://github.com/ManbokLee/vue-naver-map
You might also like...

Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

Directus-extension-svgmap-picker-interface - Select a value from a SVG Map box, built using vue.js

This extension is under development, it may take breaking changes. SVG Map Picke

Jun 13, 2022

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

EV Charge Map is an application to search for all the EV charge points for your journey. Made with Quasar/Vue

Aug 3, 2022

A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022

Kartobuilder - a php package for the laravel framework that works with the inertia jetstream stack to build your own map

Kartobuilder is a php package for the laravel framework that works with the inertia jetstream stack to build your own map.

May 3, 2022

🗺 Map Module for Nuxt 3

@nuxtjs/map Map module for Nuxt ✨ Release Notes 📖 Read the documentation Features Nuxt 3 ready Easy integration with Google Maps & Leaflet Use only t

May 1, 2022

Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

Aug 9, 2022

A Vue.js component for Mapbox GL JS

Mapbox GL JS Vue.js A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Demo Installation Setup Props Events Plugins Popups Development

Jul 10, 2022

Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : map :center="{lat:

Aug 5, 2022

Yandex Maps Component for VueJS

Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster 💻 Nikitenko Andrey 💻 Kamil 💻 Alex

Aug 12, 2022
Related tags
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

Aug 1, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
a simple component to generate an static google map
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

Aug 15, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

Aug 9, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]
New Sayobot Map Downloader Written by Electron@12, Vite@2, Vue@3

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

Aug 8, 2022
Web map Vue 3.x components with the power of OpenLayers
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Aug 17, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Jul 10, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

May 28, 2022