TGOS

API:(https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi)

前情提要

需要先申請TGOS MAP API KEY

可以申請 domain or ip ，一個KEY可以填五個值

TGOS 地圖座標系統

參考資料:(https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi#tgcoordsys)

在初始化地圖時，需要先設定座標系統。

new TGOS.TGOnlineMap(pOMap, TGOS.TGCoordSys.EPSG3857, mapOptiions);

EPSG3826 TWD97 坐標系統(台灣)。 EPSG3857 Google 坐標系統。 EPSG3825 TWD97 坐標系統(澎湖)。

經度、緯度的順序和Google Map相反

例如:

Google Map

new google.maps.LatLng(24.453842, 118.375047);

TGOS

new TGOS.TGPoint(120.290602, 22.627883);

正式開始

總範例

參考資料:(https://api.tgos.tw/TGOS_MAP_API/docs/site/web/LiteInit)

<script type="text/javascript">

        var messageBox;                    //訊息視窗物件  

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

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

        var infotext = '<B>abc</B><br>高雄市前鎮區民權二路8號18樓';         //地標名稱及訊息視窗內容

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

        var markerPoint = new TGOS.TGPoint(120.290602, 22.627883); 
        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.EPSG3857, 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();

        }

        $(document).ready(function(){
            InitWnd();
        });

    </script>

    <div id="OMap" style="position:absolute; top:5px; left:5px; width:495px; height:400px; border:1px solid #000000;"></div>

設定地圖

https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi#tgonlinemap_class

HTML

<div id=\"map_canvas\" Class=\"GoogleMap\" style=\"width: {0}px; height: {1}px\"></div>

JS

var latlng = new TGOS.TGPoint(118.375047, 24.453842);
var mapOptions = { scaleControl:false,
        navigationControl: true,
        navigationControlOptions: {
        controlPosition: TGOS.TGControlPosition.BOTTOM_RIGHT,  //控制項位置
    navigationControlStyle: TGOS.TGNavigationControlStyle.MEDIUM         //控制項樣式 
        },
        mapTypeControl: false");
};
var map1 = new TGOS.TGOnlineMap(document.getElementById(\"map_canvas\"), TGOS.TGCoordSys.EPSG3857, mapOptions);
map1.setZoom(12);
map1.setCenter(latlng);

設定marker

https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi#TGMarker_class

var markerImg = new TGOS.TGImage(sIcon, new TGOS.TGSize(23, 31), new TGOS.TGPoint(0, 0), new TGOS.TGPoint(23, 31));
var markerPoint = new TGOS.TGPoint(lang, lat);
var marker = new TGOS.TGMarker(map1, markerPoint,'', markerImg);

清除 marker

和Google Map 的方式相同

參考資料:(https://api.tgos.tw/TGOS_MAP_API/docs/site/web/ComplexLocate)

清除單個 marker

 marker.setMap(null);

消除全部 markers

for (i in allMarkers) {
    allMarkers[i].setMap(null);");
}

設定InfoWindows

https://api.tgos.tw/TGOS_MAP_API/docs/site/web/Reference/webapi#tginfowindow_class

var infoContent ='<div class=\"InfoBlock\">
    <div>
        <a href="sUrl"> stitle </a>
    </div>
</div>');

var infoWindowOptions = {    
    pixelOffset: new TGOS.TGSize(0, -31)
};

var infowindow = new TGOS.TGInfoWindow(infoContent, markerPoint, infoWindowOptions);


TGOS.TGEvent.addListener(marker, 'mouseover', function () { 
    for (i in allMarkers) {
        infowindows[i].close();
    }
    InfoWindowOpen(infowindow,marker,map);
});