JIDO

js

import Jido from '@nzero/jido';


const map = new Jido('map');
const viewManager = map.getViewManager();

/**
 * 파라미터
 * @param center - 맵의 초기 중심 좌표 ([경도, 위도])
 * @param zoom - 초기 줌 레벨, 기본값 2
**/

viewManager.move([126.9784, 37.5666],10);

/**
 * 파라미터
 * @param center - 맵의 초기 중심 좌표 ([경도, 위도])
 * @param zoom - 초기 줌 레벨, 기본값 2
 * @param duration - 애니메이션 지속 시간 (ms 단위, 기본값: 1000)
**/
viewManager.moveAnimate([126.9784, 37.5666],10);

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Accessible Map</title>
  <style>
    html, body, #map { margin: 0; width: 100%; height: 100%; }
  </style>
</head>
<body>
    <div id="map" tabindex="0"></div>
    <div class="description">
    <button id="move">이동</button>
    <button id="moveAnimate">애니메이션 이동</button>
</div>
<script>
    const map = new Jido('map');
    const viewManager = map.getViewManager();

    document.getElementById('move').onclick=()=>{
        viewManager.move([126.9784, 37.5666],10);
    }
    document.getElementById('moveAnimate').onclick=()=>{
        viewManager.moveAnimate([126.9784, 37.5666],10);
    }
</script>
</body>
</html>

package.json

{
  "dependencies": {
    "@nzero/jido": "^0.1.1",
  },
}