Vue Daum Map Component

Related tags

Map vue-daum-map
Overview

vue-daum-map

다음 지도를 래핑한 Vue.js 컴포넌트입니다.

데모

Demo

참고 사항

  • 중심좌표와 레벨값은 sync 됩니다.
  • 지도가 로드되면 load 이벤트가 발생하며, 파라미터로 넘어오는 map 객체를 통해 지도를 직접 컨트롤 가능합니다. 또한 daum 객체를 넘겨 사용자가 임의로 객체를 생성할 수 있도록 한다.
  • 지도에서 발생하는 Events 들은 모두 그대로 내어주고 있으므로 필요시 바인딩하여 사용하시면 됩니다.
  • appKey 는 다음 지도 Web API 가이드를 참고하여 새로 발급받아 사용하세요.

개발 환경 & 도구

  • Node.js 8.x
  • Vue.js 2.x
  • ES2015
  • Webpack 4.x
  • Daum Map SDK 4.0.5

하위 버전에서는 테스트하지 않았습니다.

설치

$ npm install vue-daum-map --save
# 혹은
$ yarn add vue-daum-map

컴포넌트 사용 예제

템플릿 예제

<vue-daum-map
      :appKey="appKey"
      :center.sync="center"
      :level.sync="level"
      :mapTypeId="mapTypeId"
      :libraries="libraries"
      @load="onLoad"
      @center_changed=""
      @zoom_start=""
      @zoom_changed=""
      @bounds_changed=""
      @click=""
      @dblclick=""
      @rightclick=""
      @mousemove=""
      @dragstart=""
      @drag=""
      @dragend=""
      @idle=""
      @tilesloaded=""
      @maptypeid_changed=""
      style="width:500px;height:400px;"/>
import VueDaumMap from 'vue-daum-map'

속성 예제

{
    data: () => ({
        appKey: 'd650a15bea81e28dadb716657ad03d75', // 테스트용 appkey
        center: {lat:33.450701, lng:126.570667}, // 지도의 중심 좌표
        level: 3, // 지도의 레벨(확대, 축소 정도),
        mapTypeId: VueDaumMap.MapTypeId.NORMAL, // 맵 타입
        libraries: [], // 추가로 불러올 라이브러리
        map: null, // 지도 객체. 지도가 로드되면 할당됨.
        daum: null, // 다음 API 객체. 지도가 로드되면 할당됨.
    }),
}

메서드 예제

{
    methods: {
        // 지도가 로드 완료되면 load 이벤트 발생
        onLoad (map, daum) {
            this.map = map;
            this.daum = daum;
        }
    }
}

Props

prop type required description
appKey String true App key
libraries Array false 추가로 불러올 라이브러리
ex) ['services', 'clusterer', 'drawing']
center Object true {lat:33.450701, lng:126.570667}
level Number false 지도의 레벨(확대, 축소 정도)
mapTypeId Number false 일반지도 : VueDaumMap.MapTypeId.NORMAL
스카이뷰: VueDaumMap.MapTypeId.HYBRID
draggable Boolean false 마우스 드래그, 휠, 모바일 터치를 이용한 시점 변경(이동, 확대, 축소) 가능 여부
scrollwheel Boolean false 마우스 휠, 모바일 터치를 이용한 확대 및 축소 가능 여부
disableDoubleClick Boolean false 더블클릭 이벤트 및 더블클릭 확대 가능 여부
disableDoubleClickZoom Boolean false 더블클릭 확대 가능 여부
projectionId String false 투영법 지정
tileAnimation Boolean false 지도 타일 애니메이션 설정 여부
keyboardShortcuts Boolean or Object false 키보드의 방향키와 +, – 키로 지도 이동,확대,축소 가능 여부

Events

event description
load 다음 맵이 로드된 직후 발생한다.
center_changed 중심 좌표가 변경되면 발생한다.
zoom_start 확대 수준이 변경되기 직전 발생한다.
zoom_changed 확대 수준이 변경되면 발생한다.
bounds_changed 지도 영역이 변경되면 발생한다.
click 지도를 클릭하면 발생한다.
dblclick 지도를 더블클릭하면 발생한다.
rightclick 지도를 마우스 오른쪽 버튼으로 클릭하면 발생한다.
mousemove 지도에서 마우스 커서를 이동하면 발생한다.
dragstart 드래그를 시작할 때 발생한다.
drag 드래그를 하는 동안 발생한다.
dragend 드래그가 끝날 때 발생한다.
idle 중심 좌표나 확대 수준이 변경되면 발생한다.
단, 애니메이션 도중에는 발생하지 않는다.
tilesloaded 확대수준이 변경되거나 지도가 이동했을때 타일 이미지 로드가 모두 완료되면 발생한다.
maptypeid_changed 지도 기본 타일(일반지도, 스카이뷰, 하이브리드)이 변경되면 발생한다.
Issues
  • Marker를 표시 하고 싶습니다.

    Marker를 표시 하고 싶습니다.

    방법을 모르겠네요 ..

    답변에 미리 감사 드립니다.

    opened by hanjool 3
  • nuxt 호환성

    nuxt 호환성

    nuxt에서는 호환되지 않는건가요? 계속 삽질해보는데 전혀 동작하지 않네요..

    opened by seongjoojin 2
  • load 이벤트에 daum 객체 파라미터 추가

    load 이벤트에 daum 객체 파라미터 추가

    API를 모두 vue-daum-map 모듈 안에서 처리하면 좋겠지만, 임시로 daum(kakao) 객체를 load 이벤트 활성화시 제어할 수 있도록 코드를 추가했습니다.

    opened by rockatoo 2
  • IE에서 bindEvents 이벤트 에러

    IE에서 bindEvents 이벤트 에러

    IE에서 초기 맵 로드시 bindEvents 이벤트

    151번

    for (let event of EVENTS) { this.bindEvent(event, handlers[event]); }

    부분이 에러를 발생합니다. 저는 of 대신 in 으로 바꿔서 사용하였습니다.

    opened by yousung 1
  • docs(readme.md): 코드블럭 언어 지정, 오타 수정, yarn 추가, 포맷팅, import 예시 추가

    docs(readme.md): 코드블럭 언어 지정, 오타 수정, yarn 추가, 포맷팅, import 예시 추가

    안녕하세요?

    편리한 컴포넌트 감사드립니다.

    README.md 를 더 보기 쉽고 사용자 친화적으로(e.g. 복사 및 붙여넣기가 쉽도록) 개선할 수 있을듯 하여 PR 드립니다 :)

    변경사항은 diff 로도 보시되, 실제 렌더링 된 내용도 따로 찾지 않고 한번의 클릭으로 보시기 쉽도록 여기 링크걸어 드립니다.

    코드블럭 언어 지정

    • vue(템플릿예제)
    • js(템플릿 예제, 속성 예제, 메서드 예제)
    • bash(설치)

    오타 수정

    속성 예제에 각 필드 뒤에 빠졌던 콤마(,) 추가

    yarn 추가

    설치 커맨드에 yarn 도 추가

    포맷팅

    js snippet 포맷팅

    import 예시 추가

    import VueDaumMap from 'vue-daum-map' 예시 추가

    opened by jjangga0214 1
  • Bump js-yaml from 3.7.0 to 3.13.1

    Bump js-yaml from 3.7.0 to 3.13.1

    Bumps js-yaml from 3.7.0 to 3.13.1.

    Changelog

    Sourced from js-yaml's changelog.

    3.13.1 / 2019-04-05

    • Fix possible code execution in (already unsafe) .load(), #480.

    3.13.0 / 2019-03-20

    • Security fix: safeLoad() can hang when arrays with nested refs used as key. Now throws exception for nested arrays. #475.

    3.12.2 / 2019-02-26

    • Fix noArrayIndent option for root level, #468.

    3.12.1 / 2019-01-05

    • Added noArrayIndent option, #432.

    3.12.0 / 2018-06-02

    • Support arrow functions without a block statement, #421.

    3.11.0 / 2018-03-05

    • Fix dump in bin/octal/hex formats for negative integers, #399.
    • Add arrow functions suport for !!js/function.

    3.10.0 / 2017-09-10

    • Fix condenseFlow output (quote keys for sure, instead of spaces), #371, #370.
    • Dump astrals as codepoints instead of surrogate pair, #368.

    3.9.1 / 2017-07-08

    • Ensure stack is present for custom errors in node 7.+, #351.
    ... (truncated)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language
    dependencies 
    opened by dependabot[bot] 0
  • Update gh-pages

    Update gh-pages

    opened by okchangwon 0
  • build(meta): keywords 추가 및 정렬, bugs 필드 추가, homepage 필드 추가, author 필드 포맷팅

    build(meta): keywords 추가 및 정렬, bugs 필드 추가, homepage 필드 추가, author 필드 포맷팅

    author 필드 외의 다른 부분들은 diff 만으로 의도를 쉽게 아시리라 생각합니다.

    author 필드는 inline 으로 쓸 경우,

    {
      author: "이름 <이메일> (개인 홈페이지)"
    }
    

    와 같이 써야 합니다. (출처)

    이메일만 명시해 두셨는데, 이는 npm parser 들 및 crawler 들이 'name' 으로 오해할 소지가 있습니다. 때문에 인라인 스타일 대신 json 으로 명확히 명시했습니다.

    opened by jjangga0214 0
  • chore(gitignore): vscode 추가

    chore(gitignore): vscode 추가

    opened by jjangga0214 0
  • Bump url-parse from 1.5.1 to 1.5.3

    Bump url-parse from 1.5.1 to 1.5.3

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(1.1.0)
Owner
옥창원
옥창원
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

eric regnier 124 Jan 14, 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

Gerard Burns 39 Jan 16, 2022
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

Eduardo P. Rivero 22 Sep 18, 2021
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

马金花儿 2.2k Jan 16, 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

Vladimir Vershinin 610 Jan 12, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

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

null 5 Nov 19, 2021
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

Melih Altıntaş 223 Jan 24, 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

Victor Cazanave 65 Jan 18, 2022
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

MapTiler 4 Dec 31, 2021
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

Sylvain Julé 79 Dec 12, 2021
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

Daniel Sim 1.8k Jan 8, 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

Pete Hegman 262 Nov 21, 2021
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:

Guillaume Leclerc 547 Jan 14, 2022
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

null 310 Jan 23, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

Diego A. Zapata Häntsch 117 Jan 12, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Damien Roche 29 Dec 9, 2021
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Studio Meta 36 Nov 9, 2021
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

Zoya 0 Dec 5, 2021
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

Vue Leaflet 1.8k Jan 21, 2022