指定地圖位置範例

Edit Code :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>TGOS MAP API for Web 指定地圖位置</title>
	<script type="text/javascript" src="https://api.tgos.tw/TGOS_API/tgos?ver=2&AppID=yourID&APIKey=yourkey" charset="utf-8"></script>
	
    <script type="text/javascript">
        var pMap;
        function InitWnd() {
            var pOMap = document.getElementById("TGMap");
            pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826);
            pMap.setCenter(new TGOS.TGPoint(302430.958, 2770552.360)); //指定中心點坐標
            pMap.setZoom(7); //指定地圖層級
        }
        function get_Envelope() {
            alert(pMap.getBounds()); //取出地圖的邊框Envelope物件
        }
        function set_Envelope() {
            var fixleft = Number(document.getElementById("fixleft").value);
            var fixtop = Number(document.getElementById("fixtop").value);
            var fixright = Number(document.getElementById("fixright").value);
            var fixbottom = Number(document.getElementById("fixbottom").value);
            pMap.fitBounds(new TGOS.TGEnvelope(fixleft, fixtop, fixright, fixbottom));
            //傳入Envelope物件以設定地圖的邊框範圍
            pMap.setZoom(7); //指定地圖層級
        }
        function MoveMap() {
            var X = Number(document.getElementById("txt_X").value);
            var Y = Number(document.getElementById("txt_Y").value);
            pMap.panBy(X, Y); //輸入坐標x,y，以此點做為平移基準，可對地圖進行平移
        }
</script>
</head>
<body style="margin: 0px" onload="InitWnd();">
    <div id="TGMap" style="width: 640px; height: 480px; border: 1px solid #C0C0C0;">
    </div>
    <br />
    <button onclick="get_Envelope();" style="width: 200px; height: 22px;">
        取得地圖邊框坐標範圍</button><br />
    <button onclick="set_Envelope();" style="width: 200px; height: 22px;">
        輸入坐標設定地圖邊框範圍</button>
    左<input type="text" id="fixleft" value="303838" size="6" />
    上<input type="text" id="fixtop" value="2771872" size="7" />
    右<input type="text" id="fixright" value="305526" size="6" />
    下<input type="text" id="fixbottom" value="2770608" size="7" /><br />
    <button onclick="MoveMap();" style="width: 200px; height: 22px;">
        輸入平移距離</button>
    X<input type="text" id="txt_X" value="1000" size="8" />
    Y<input type="text" id="txt_Y" value="1000" size="8" />
</body>
</html>