@sd.florida/naver-map-lib

소개

vue3에서 네이버 지도 API를 쉽게 사용하기 위한 라이브러리 입니다.

모든 소스코드는 네이버 지도 API v3를 기반으로 만들었습니다.
(링크 : https://navermaps.github.io/maps.js.ncp/docs/)

npm

npm install @sd.florida/naver-map-lib

Example

1. 지도 불러오기

<template>
  <Map :apiKey="naverMapApiKey" :options="mapOptions" width="100%" height="800px">
  </Map>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Map } from '@sd.florida/naver-map-lib'

const naverMapApiKey = '발급받은 네이버지도 API 키'
const mapOptions = ref({
  centerPosition: { lat: centerPositionLat, lng: centerPositionLng },
  zoom: 12,
  onZoomChanged: (zoomLevel: number) => {
    console.log(zoomLevel)
  },
})

</script>

2. 마커 표시하기

<template>
  <Map :apiKey="naverMapApiKey" :options="mapOptions" width="100%" height="800px">
    <Marker :marker="markerOption"/>
  </Map>
</template>
<script setup lang="ts">
import { Map, Marker } from '@sd.florida/naver-map-lib'
import { ref } from "vue";

const markerOption = ref({
  id: 'a-1',
  onClick: (e: any, marker: any) => {
    console.log(e, marker)
  },
  position: {
    lat: 37.5301893,
    lng: 126.9261367
  },
  clickable: true,
  draggable: true,
  onDragend: (e: any) => {
    console.log('drag end', e)
  },
  /* 기타 옵션들은 MarkerOption 참고 https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html */
})

</script>

3. Polygon 표시

<template>
  <Map :apiKey="naverMapApiKey" :options="mapOptions" width="100%" height="800px">
    <Polygon :polygon="polygon"/>
  </Map>
</template>

<script setup lang="ts">
import { Map, Polygon } from '@sd.florida/naver-map-lib'
import { ref } from "vue";

const polygon = ref({
  paths: [{ lat: {위도}, lng: {경도} }, ...], // 단일 Array 로 처리
  /* 기타 옵션들은 PolygonOption 참고 https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Polygon.html */
})
</script>

4. Polyline 표시

<template>
  <Map :apiKey="naverMapApiKey" :options="mapOptions" width="100%" height="800px">
    <Polyline :polyline="polyline"/>
  </Map>
</template>

<script setup lang="ts">
import { Map, Polyline } from '@sd.florida/naver-map-lib'
import { ref } from "vue";

const polyline = ref({
  path: [{ lat: {위도}, lng: {경도} }, ...]
  /* 기타 옵션들은 PolylineOption 참고 https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Polyline.html */
})
</script>

5. InfoWindow 표시

<template>
  <Map :apiKey="naverMapApiKey" :options="mapOptions" width="100%" height="800px">
    <InfoWindow :infoWindow="infoWindowOption" @onLoad="infoWindowLoaded" />
  </Map>
</template>

<script setup lang="ts">
import { Map, InfoWindow } from '@sd.florida/naver-map-lib'
import { ref } from "vue";

const infoWindow = ref() // infoWindow 컴포넌트 ref 객체
const infoWindowOption = ref({
  content: `컨텐츠`,
  position: {lat: 0, lng: 0},
  onOpen: (e: any, infoWindow: any) => {
    /* open event listener */
  },
  onClose: (e: any, infoWindow: any) => {
    /* close event listener */
  }
})


const infoWindow1Loaded = (info: any) => {
  infoWindow.value = info
}

// 지도 위에 인포윈도우 열기
function infoWindowOpen() {
  infoWindowOption.value = {
    content: 'test contents', // HTML DOM String으로 작성
    position: { lat: {위도}, lng: {경도} }
  }
  infoWindow.value.open()
}

// 마커 위에서 인포윈도우 열기
function infoWindowOpenOnMarker(marker) {
  infoWindowOption.value = {
    content: 'test contents', // HTML DOM String으로 작성
    position: { lat: marker.position.y, lng: marker.position.x }
  }
  infoWindow.value.open(marker)
}