地址定位範例

Edit Code :

<!DOCTYPE html>
<html>
	<head>
		<title>TGOS MAP API for Web 地址定位</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<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 locator = new TGOS.TGLocateService();  //宣告定位物件
            var addressInput;
            var mDiv, map;
            var marker;
            function locate() {
                locator.locateTWD97({  //指定回傳結果為TWD97坐標系統
                    address : addressInput.value  //要求地址定位
                }, function(e, status) {
                    if (status != TGOS.TGLocatorStatus.OK) {
                        return;
                    }
                    marker.setVisible(true);
                    marker.setPosition(e[0].geometry.location);  //將定位結果以標記顯示
                    map.fitBounds(e[0].geometry.viewport);	//將地圖畫面移至符合查詢之位置				
					document.getElementById("addrXY").innerHTML = "X坐標：" + e[0].geometry.location.x + "，Y坐標：" + e[0].geometry.location.y;  //在addrXY Div中顯示地址坐標
                });
            }
            function main() {
                mDiv = document.getElementById("TGMap");
				var mapOptions = {
				disableDefaultUI: true		//關閉所有地圖操作介面
				};
                map = new TGOS.TGOnlineMap(mDiv, TGOS.TGCoordSys.EPSG3826, mapOptions);
                marker = new TGOS.TGMarker(map, new TGOS.TGPoint(0, 0));
                marker.setVisible(false);
                addressInput = document.getElementById('address');
            };
		</script>
	</head>
	<body onload="main()">
		<div id="TGMap" style="width:640px;height:480px;border: 1px solid #C0C0C0;"></div>
		<div id="addrXY" style="width:640px;height:25px;border: 1px solid #C0C0C0;"></div>
		輸入地址 :
		<input style="width:40%" id='address' value='臺北市中山區松江路469巷4號'>
		<input type="submit" value="地址定位" onclick="locate()">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>TGOS MAP API for Web 地址定位</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<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 locator = new TGOS.TGLocateService();  //宣告定位物件
            var addressInput;
            var mDiv, map;
            var marker;
            function locate() {
                locator.locateTWD97({  //指定回傳結果為TWD97坐標系統
                    address : addressInput.value  //要求地址定位
                }, function(e, status) {
                    if (status != TGOS.TGLocatorStatus.OK) {
                        return;
                    }
                    marker.setVisible(true);
                    marker.setPosition(e[0].geometry.location);  //將定位結果以標記顯示
                    map.fitBounds(e[0].geometry.viewport);	//將地圖畫面移至符合查詢之位置				
					document.getElementById("addrXY").innerHTML = "X坐標：" + e[0].geometry.location.x + "，Y坐標：" + e[0].geometry.location.y;  //在addrXY Div中顯示地址坐標
                });
            }
            function main() {
                mDiv = document.getElementById("TGMap");
				var mapOptions = {
				disableDefaultUI: true		//關閉所有地圖操作介面
				};
                map = new TGOS.TGOnlineMap(mDiv, TGOS.TGCoordSys.EPSG3826, mapOptions);
                marker = new TGOS.TGMarker(map, new TGOS.TGPoint(0, 0));
                marker.setVisible(false);
                addressInput = document.getElementById('address');
            };
		</script>
	</head>
	<body onload="main()">
		<div id="TGMap" style="width:640px;height:480px;border: 1px solid #C0C0C0;"></div>
		<div id="addrXY" style="width:640px;height:25px;border: 1px solid #C0C0C0;"></div>
		輸入地址 :
		<input style="width:40%" id='address' value='臺北市中山區松江路469巷4號'>
		<input type="submit" value="地址定位" onclick="locate()">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<title>TGOS MAP API for Web 地址定位</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<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 locator = new TGOS.TGLocateService();  //宣告定位物件
            var addressInput;
            var mDiv, map;
            var marker;
            function locate() {
                locator.locateTWD97({  //指定回傳結果為TWD97坐標系統
                    address : addressInput.value  //要求地址定位
                }, function(e, status) {
                    if (status != TGOS.TGLocatorStatus.OK) {
                        return;
                    }
                    marker.setVisible(true);
                    marker.setPosition(e[0].geometry.location);  //將定位結果以標記顯示
                    map.fitBounds(e[0].geometry.viewport);	//將地圖畫面移至符合查詢之位置				
					document.getElementById("addrXY").innerHTML = "X坐標：" + e[0].geometry.location.x + "，Y坐標：" + e[0].geometry.location.y;  //在addrXY Div中顯示地址坐標
                });
            }
            function main() {
                mDiv = document.getElementById("TGMap");
				var mapOptions = {
				disableDefaultUI: true		//關閉所有地圖操作介面
				};
                map = new TGOS.TGOnlineMap(mDiv, TGOS.TGCoordSys.EPSG3826, mapOptions);
                marker = new TGOS.TGMarker(map, new TGOS.TGPoint(0, 0));
                marker.setVisible(false);
                addressInput = document.getElementById('address');
            };
		</script>
	</head>
	<body onload="main()">
		<div id="TGMap" style="width:640px;height:480px;border: 1px solid #C0C0C0;"></div>
		<div id="addrXY" style="width:640px;height:25px;border: 1px solid #C0C0C0;"></div>
		輸入地址 :
		<input style="width:40%" id='address' value='臺北市中山區松江路469巷4號'>
		<input type="submit" value="地址定位" onclick="locate()">
	</body>
</html>