Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
​
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Vworld Map 생성하기</title>
    <!-- vworld 스크립트 호출 -->
    <script type="text/javascript"
        src="https://map.vworld.kr/js/webglMapInit.js.do?version=2.0&apiKey=767B7ADF-10BA-3D86-AB7E-02816B5B92E9"></script>
</head>
​
<body>
    <!-- Map을 생성할 부분  -->
    <div id="vmap" style="position: absolute; width:99%;height:100vh;"></div>
    <!-- Map 생성 시 필요한 설정 부분  -->
    <div style="left:10px; position: absolute; z-index: 1; width: 200px; height: 150px; background-color: #ffffff80;">
        <p>
            <input type="button" onclick="vwmap_create()" value="지도호출">
        </p>
        <!-- 경복궁으로 이동하는 이벤트 버튼 -->
        <p>
            <input type="button" onclick="vmap_move(126.97703026981958, 37.57970200648469,  500)" value="경복궁 이동">
        </p>
        <!-- 서귀포시로 이동하는 이벤트 버튼 -->
        <p>
            <input type="button" onclick="vmap_move(126.56102749819851, 33.25313092244775,  500)" value="서귀포시 이동">
        </p>
    </div>
    <script type="text/javascript">
        var map3d = null;
        function vwmap_create() {
            /**
            vw.MapOptions(
                basemapType, // 2D 초기배경지도
                layersArr, // 레이어목록(3D에서 사용안함)
                controlDensity, // 2D지도 전용.
                interactionDensity, // 2D지도 전용.
                controlAutoArrange, // 2D지도 전용.
                homePosition, // 2D,3D 공통 사용.
                initPosition // 2D,3D 공통 사용.
            );
             **/
            var mapOptions = new vw.MapOptions(
                vw.BasemapType.GRAPHIC, // 2D 초기배경지도 
                "", // 레이어목룩(3D에서 사용안함)
                vw.DensityType.BASIC, // 2D 지도 전용
                vw.DensityType.BASIC, // 2D 지도 전용
                false, // 2D 지도 전용 
                new vw.CameraPosition(
                    //  vw.CoordZ(X,Y,Z) 클래스 : X(경도), Y(위도), Z(지면으로부터의 높이)
                    new vw.CoordZ(127.425, 38.196, 1548700),
                    // vw.Direction(heading,tilt,roll) 클래스 : heading(수평방향 회전각도), tilt(수직방향 회전각도),roll(카메라자체 회전각도)
                    new vw.Direction(-90, 0, 0)
                ), // 2D, 3D 공통 사용 
                new vw.CameraPosition(
                    new vw.CoordZ(127.425, 38.196, 1548700),
                    new vw.Direction(0, -90, 0)
                ) // 2D, 3D 공통 사용
            );
​
            map3d = new vw.Map("vmap", mapOptions);
        }
​
        /**
         * 이동할 위치와 높이값을 지정
         **/
        function vmap_move(x, y, z) {
            if (!map3d) alert('지도를 먼저 생성하세요!');
            if (!map3d) return null;
            //  좌표 지점, 카메라 포지션 지정 
            var movePo = new vw.CoordZ(x, y, z);
            var mPosi = new vw.CameraPosition(movePo, new vw.Direction(0, -80, 0));
            // map 이동 
            map3d.moveTo(mPosi);
        }
    </script>
</body>
​
</html>
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers