使用TGOS MAP API-Lite (Web)建立多標記點

TGOS MAP API - Lite推廣版：同時標記多個點位

TGOS MAP API – Lite推廣版進階應用範例

自TGOS MAP API – Lite推廣版啟用以來，內政部資訊中心接獲各界熱烈迴響。由於使用者反應希望能補充更進階的應用範例，以便進一步認識TGOS MAP API – Lite的效用，本範例將提供一個容易擴充的程式碼，讓使用者可以依照使用需求自由地調整電子地圖上標記點的數量與樣式。

與第一個範例相似，使用者僅需1.複製既有程式碼、2.修改標記點資訊、3.將程式碼存成.htm檔，即可自己建立更進階的專屬電子地圖！

１.複製既有程式碼

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

<html>

<head>

<title>TGOS MAP API (lite) --- 多標記點呈現</title>

var messageBox; //訊息視窗物件

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

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

var infotext = ['<B>臺北市政府'

, '<B>新北市政府'

, '<B>臺中市政府'

, '<B>臺南市政府'

, '<B>高雄市政府'

]; //依序填入地標名稱及訊息視窗內容, 可自行增減數量

var markerPoint = [new TGOS.TGPoint(306954, 2770049)

, new TGOS.TGPoint(296991, 2767219)

, new TGOS.TGPoint(214192, 2673102)

, new TGOS.TGPoint(166459, 2543656)

, new TGOS.TGPoint(179269, 2502465)

]; //依序填入地標坐標位置, 坐標數須與標記數一致

var imgUrl = ["http://api.tgos.tw/TGOS_API/images/marker2.png"

, "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(2); //初始地圖縮放層級

//pMap.setCenter(中心點X坐標, 中心點Y坐標); //初始地圖中心點

for(var i = 0; i < infotext.length; i++) {

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

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

var pTGMarker = new TGOS.TGMarker(pMap, markerPoint[i],'', markerImg, {flat:false}); //建立機關單位標記點

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

var InfoWindowOptions = {

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

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

};

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

TGOS.TGEvent.addListener(pTGMarker, "mouseover", function (pTGMarker, messageBox) {

return function () {

messageBox.open(pMap, pTGMarker);

}

} (pTGMarker, messageBox));//滑鼠監聽事件--開啟訊息視窗

TGOS.TGEvent.addListener(pTGMarker, "mouseout", function (messageBox) {

return function () {

messageBox.close();

}

} (messageBox));

}

</script>

</head>

</html>

2.修改修改標記點資訊

在本範例中，標記點包含資訊為：訊息視窗的文字、空間位置，以及標記點的圖案樣式，其變數代碼依序定義為：infotext、markerPoint，與imgUrl。為了將方便一次管理多個標記點，上述變數均使用以下方式群組為陣列：

var infotext = ['訊息視窗的文字1', '訊息視窗的文字2',…,'訊息視窗的文字n'];

var markerPoint = [空間位置1,空間位置2,…, 空間位置n];

var imgUrl = ["圖案樣式1", "圖案樣式2",…, "圖案樣式n"];

需要特別注意的，訊息視窗的文字(infotext)需要寫在引號裡面；空間位置(markerPoint)則是以：「new TGOS.TGPoint(Ｘ坐標, Y坐標)」表示(本範例的坐標系統為TWD97-TM2，可參考本站的地址定位範例，進行查詢)；標記點圖樣(imgUrl)則是以網址的方式表現，要寫在引號裡面。因此，需要修改的程式碼為以下範圍。

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

var infotext = ['<B>臺北市政府'

, '<B>新北市政府'

……

, '<B>高雄市政府'

]; //依序填入地標名稱及訊息視窗內容, 可自行增減數量

var markerPoint = [new TGOS.TGPoint(306954, 2770049)

, new TGOS.TGPoint(296991, 2767219)

……

, new TGOS.TGPoint(179269, 2502465)

]; //依序填入地標坐標位置, 坐標數須與標記數一致

var imgUrl = ["http://api.tgos.tw/TGOS_API/images/marker2.png"

, "http://api.tgos.tw/TGOS_API/images/marker2.png"

……

, "http://api.tgos.tw/TGOS_API/images/marker2.png"

]; //依序設定標記點圖示來源

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

3.將程式碼存成.htm檔

與推廣版第一個範例一樣，儲存檔案時將副檔(.txt)名改成.htm，並確認編碼為UTF-8。

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