TGOS MAP API-Lite (Web)範例

TGOS MAP API - Lite推廣版：30秒建立您第一個專屬地圖

歡迎使用TGOS MAP API – Lite推廣版！

內政部資訊中心基於全民共享的理念，提供推廣版的範例程式，讓所有使用者在沒有任何程式語言基礎及程式編輯軟體的情境下，建立自有的專屬電子地圖！您可以依照喜好標記自己的住家、學校、公司的位置，或將電子地圖內遷到自己的網站之中，完全免費！

使用者僅需1.複製既有程式碼、2.修改地址與坐標、3.將程式碼存成.htm檔，簡單的步驟，即可擁有自己的地圖！

１.複製既有程式碼

請將以下程式碼複製到任何文字編輯軟體，例如：記事本。

<html>

<head>

var messageBox; //訊息視窗物件

var pMap; //初始化地圖物件

//------------------------------須自行修改的參數,包含點位坐標,訊息視窗內容及圖示檔案來源設定------------------------------

var infotext = '<B>內政部資訊中心</B><br>台北市松江路469巷4號'; //地標名稱及訊息視窗內容

var markerPoint = new TGOS.TGPoint(303895, 2773227); //地標坐標位置

var imgUrl = "http://api.tgos.tw/TGOS_API/images/marker2.png"; //標記點圖示來源

//------------------------------若網頁介面依照範例網頁的預設設定,以下程式碼可不修改---------------------------------------

function InitWnd()

{

//------------------初始化地圖--------------------

var pOMap = document.getElementById("OMap");

var mapOptiions = {

scaleControl: false, //不顯示比例尺

navigationControl: true, //顯示地圖縮放控制項

navigationControlOptions: { //設定地圖縮放控制項

controlPosition: TGOS.TGControlPosition.TOP_LEFT, //控制項位置

navigationControlStyle: TGOS.TGNavigationControlStyle.SMALL //控制項樣式

mapTypeControl: false //不顯示地圖類型控制項

};

pMap = new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3826, mapOptiions); //建立地圖,選擇TWD97坐標

pMap.setZoom(11); //初始地圖縮放層級

pMap.setCenter(markerPoint); //初始地圖中心點

//------------------建立標記點---------------------

var markerImg = new TGOS.TGImage(imgUrl, new TGOS.TGSize(38, 33), new TGOS.TGPoint(0, 0), new TGOS.TGPoint(10, 33)); //設定標記點圖片及尺寸大小

var pTGMarker = new TGOS.TGMarker(pMap, markerPoint,'', markerImg); //建立機關單位標記點

//-----------------建立訊息視窗--------------------

var InfoWindowOptions = {

maxWidth:4000, //訊息視窗的最大寬度

pixelOffset: new TGOS.TGSize(5, -30), //InfoWindow起始位置的偏移量, 使用TGSize設定, 向右X為正, 向上Y為負

zIndex:99 //視窗堆疊順序

};

messageBox = new TGOS.TGInfoWindow(infotext, markerPoint, InfoWindowOptions); //建立訊息視窗

TGOS.TGEvent.addListener(pTGMarker, "mouseover", openInfoWindow); //滑鼠監聽事件--開啟訊息視窗

TGOS.TGEvent.addListener(pTGMarker, "mouseout", closeInfoWindow); //滑鼠監聽事件--關閉訊息視窗

}

function openInfoWindow() { //開啟訊息視窗函式

messageBox.open(pMap);

}

function closeInfoWindow() { //關閉訊息視窗函式

messageBox.close();

}

</script>

</head>

</html>

2.修改地標、地址與坐標

依照需求修改程式碼的地標與地址：

var infotext = '<B>內政部資訊中心</B><br>台北市松江路469巷4號';

var markerPoint = new TGOS.TGPoint(303895, 2773227);

請於<B>頁籤內輸入地標；<br>頁籤內輸入地址；並且於TGOS.TGPoint的( , )中，依序填入Ｘ，Ｙ坐標即可(本範例的坐標系統為TWD97-TM2，可參考本站的地址定位範例，進行查詢)。

3.將程式碼存成.htm檔

最後，儲存檔案時將副檔(.txt)名改成.htm，並確認編碼為UTF-8。

完成儲存之後，即可使用瀏覽器開啟您的專屬地圖！