iMap API 可以讓開發者利用 Javascript 語言，在自己網頁中嵌入Map 電子地圖，同時您也可以隨意的在地圖中新增地標點、顯示訊息視窗、新增線段、新增polygon等，擁有如同 Map 一般的豐富功能。

簡介

 　iMap API 為一嵌入式程式，提供您在自已的網頁裡嵌入自已編輯的功能，只要在非商業與營利用途的前題下，都可使用 Map API 來提供地圖服務，但 Map 將保留未來中止授權與在地圖上放置廣告的權利，更完整的使用條件請見使用條款。

使用前需知

　您必須先申請一組授權碼，並在嵌入地圖功能的網頁裡，包含一個指向提供API服務的 <script> Target Link，範例如下： 

<SCRIPT TYPE="text/javascript" SRC="http://api.map.com.tw/js/getAPI.asp?v=1&key=授權碼"></SCRIPT>

您可以在同一個網頁中增加多個iMAP物件，當您在增加一個新的iMAP物件時，必須指定一個網頁元件(通常使用DIV element)，iMAP API會自動照該物件的大小將地圖嵌入。

範例目錄

範例

基本(The Basics)  Top

    首先，從建一張地圖開始，您可以看到一開始必須先使用Java Script的方式，將API呼叫進網頁裡。從以下的範例程式，在網頁一開始的時候，先onLoad一個iMAP物件，並設定此張地圖的起始中心位置，並設定地圖圖層落在第N層。其中，使用一網頁元件MapLayer(此範例使用DIV element)，並設定高度跟寬度(這會影響地圖呈現的大小)

<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript" SRC="http://api.map.com.tw/js/getAPI.asp?v=1&key=授權碼"></SCRIPT>
<script type="text/javascript">
var map;
function init() {
　　map = new iMap(document.getElementById("MapLayer"));
　　map.centerMap(new Point(121.52,25.035) ,7 );   //設定地圖初始位置
}
</script>
</HEAD>
<BODY onLoad="init()">
<div id="MapLayer" style="WIDTH: 500px; HEIGHT: 300px; "> </div>
</body>

範例

取得中心點座標(Get Center X Y)  Top

可以取得目前地圖顯示中心點的座標。

 map = new iMap(document.getElementById("MapLayer")); 
 map.centerMap(new Point(121.52,25.035) ,7); 
 var p = new Point()         //New一新pt型態        
 p = map.getCenter();      //取得型態為pt
 x=p.x         //取得座標
 y=p.y                            
範例

增加地圖控制項(Adding Controls to the Map)  Top

    若您想要再地圖上加上可以操作的控制列，像是切換地圖影像功能類別，就必需使用到addControl函數及setMapType函數。

-->
函數 功能 
addControl LargeScaleBar：增加圖層控制列
SmallScaleBar：圖層控制列(增、減功能)
MidiumScaleBar：圖層控制列(數字控制)
FunctionControl：框選及測距控制列
  map = new iMap(document.getElementById("MapLayer"));
  map.centerMap(new Point(121.52,25.035) ,7);  
  map.addControl('MapTypeControl');   
  map.addControl('LargeScaleBar'); 
範例1 範例2
監聽事件(Event Listeners)  Top

    此項目必須使用到addListener(obj,event,fun)，括弧內的obj為觸發對象，event為觸發事件名稱,fun為觸發後所執行的function，目前提供的Event 事件項目有：click, mouseup, mousedown, mousemove, mousemoveend, scaled, mouseout, mouseover, dblclick, focus 。

  var iEvent = new Event();
  map = new iMap(document.getElementById("MapLayer"));
  map.centerMap(new Point(121.52,25.035) ,7);
  iEvent.addListener(map,"mouseup", function(){ 
            var clickP=map.getClick(); map.MoveTo(clickP); 
  });
範例1 範例2
訊息視窗(Opening an InfoWindow)  Top

    若您想在地圖上的某一座標或是對某一點、區塊，顯示您想要出現的說明文字，就必須使用到openInfoWindow(pt,content)這個函數。其控制項目有

控制函數 說明
setInfoWindowPos(pt) 將訊息視窗移至pt點。
closeInfoWindow() 隱藏訊息視窗。
showInfoWindow() 顯示訊息視窗。
setInfoWindowOffset(offset) 讓訊息視窗向上移，offset個pixel
setInfoWindowOpacity(Opacity) 設定訊息視窗的透明度。Opacity =100為完全不透明，0為完全透明。

  map = new iMap(document.getElementById("MapLayer"));
  map.centerMap(new Point(121.52,25.035) ,7);
  map.setInfoWindowOpacity(80);
  map.openInfoWindow(new Point(121.52,25.035),"Hello World !!");
範例1 範例2
增加標記(Add Markers Overlay)  Top

    若要在地圖上某個坐標的位置增加地標，可以使用Marker(pt,content,icon)這個函數來建置，圖形為icon， 訊息內容為content，content可為html格式，此外icon可為連結圖片。若icon無指定圖片，則預設圖形為紅點。

    map = new iMap(document.getElementById("MapLayer"));
    map.centerMap(new Point(121.52,25.035) ,7); 
    var p= new Point(); 
    p=map.getCenter(); 
    for(i=0;i<=0.001;i=i+0.001){ 
        content="marker="+i; 
        m=new Marker(new Point((p.x+i),(p.y+i/10)),content);
        map.addOverlay(m); 
    }
範例1 範例2
增加線段(Add Polyline Overlay)  Top

　若您想在地圖上畫線段，並測量距離時，可以使用Polyline(points,color,size,opacity)這個函數，points為point陣列，color為polyline的顏色,size為polyline的寬度,opacity 為polyline的透明度(100 為完全不透明,0為完全透明)。

控制函數 說明
getLength() 取得polyline 的長度。單位為公尺。
setTransFigure(v) 設定是否可以修改polyline的形狀。v=true時，可以修改，v=false時，無法修改。當v=true時，會出現polyline的節點，只要移動節點，polyline形狀就會跟著改變；當v=false時，節點會消失，此時無法做修改。
　

　若您想在地圖上增加一點連結線段，您只需在point陣列裡面，多增一座標即可(有順序性)，若您想改變線段顏色，也只需將Polyline裡的color參數做設定即可。

 map = new iMap(document.getElementById("MapLayer"));
 map.centerMap(new Point(121.52,25.035) ,7);
 pl=new Polyline([new Point(121.52,25.035), new Point(121.522,25.038), new Point(121.526,25.034), new Point(121.522,25.031)] , "#FF0030" , 5 , 80); 
 map.addOverlay(pl);
範例1 範例2
增加多邊形範圍(Add Polygon Overlay)  Top

　若您想框選一多邊形範圍，並測量面積時，可使用Polygon(points,color,size,opacity)這個函數來達成。points為point陣列，color為polygon的顏色，size為polygon的寬度，opacity 為polygon 的透明度(100 為完全不透明，0為完全透明)。第一點也是終點。

控制函數 說明
getArea() 取得polygon的面積。單位為平方公尺。
setTransFigure(v) 設定是否可以修改polygon的形狀。v=true時，可以修改，v=false時，無法修改。當v=true時，會出現polygon的節點，只要移動節點，polygon形狀就會跟著改變；當v=false時，節點會消失，此時無法做修改。
 map = new iMap(document.getElementById("MapLayer"));
 map.centerMap(new Point(121.52,25.035) ,7);
 pl=new Polygon([new Point(121.52,25.035), new Point(121.522,25.038), new Point(121.526,25.034), new Point(121.522,25.031)] , "#FF0030" , 2 , 80);
 map.addOverlay(pl);
範例1 範例2
在多邊形範圍上顯示訊息(Display Info Windows Above Overlays)  Top

    若您想在多邊形所框選的範圍內顯示您要顯示的訊息，可以藉由Event事件來達成，將要被觸發的物件，置放於addListener函數裡面，再經由openInfoWindow來顯示訊息視窗

   var iEvent = new Event();
   map = new iMap(document.getElementById("MapLayer"));
   map.centerMap(new Point(121.52,25.035) ,7);
   var pl=new Polygon([new Point(121.52,25.035), new Point(121.522,25.038), new      Point(121.526,25.034), new Point(121.522,25.031)] , "#FF0030" , 2 , 80);
   iEvent.addListener(pl,"click",function(){
          map.openInfoWindow(map.getClick(),"this is a polygon");
   }); 
   map.addOverlay(pl);
範例
修改多邊形範圍(Change Polygon Overlay Shape)  Top

    當您想要修改多邊形框選的範圍時，可以利用setTransFigure來達成目的，若想要停止出現編輯點時，只需將setTransFigure內變數改成False即可。

 map = new iMap(document.getElementById("MapLayer"));
 map.centerMap(new Point(121.52,25.035) ,7);
 pl=new Polygon([new Point(121.52,25.035), new Point(121.522,25.038), new Point(121.526,25.034), new Point(121.522,25.031)] , "#FF0030" , 2 , 80);
 map.addOverlay(pl);
 pl.setTransFigure(true);
範例
滑鼠點擊icon時出現訊息視窗(Add mouse click icon to Opening an inforWindow)  Top

    以下範例，是先將Icon顯示在中心點，然後在Icon上增加一Event Click事件，在Click觸發後，再使用openInfoWindow函數，將訊息視窗跳出。

   var iEvent = new Event()
   map = new iMap(document.getElementById("MapLayer")); 
   map.centerMap(new Point(121.52,25.035) ,7);
   var p=new Point();
   p=map.getCenter();
   PL=new Marker(p,"TestMark","","/sample/Shop.gif"); 
   iEvent.addListener(PL,"click",function(){                //Icon的單擊作用
              map.openInfoWindow(p,"Hello World !!")
   }); 
   map.addOverlay(PL); 
範例
滑鼠移過icon時出現訊息視窗(Add mouse over icon to Opening an inforWindow)  Top

    此範例跟上一個範例的方法類似，只是將Click事件換成滑鼠經過Icon時觸發的反應事件，您可以依照此類的方式，去建置您所想要的地圖功能。

　var iEvent = new Event()
　map = new iMap(document.getElementById("MapLayer")); 
　map.centerMap(new Point(121.52,25.035) ,7);
　var p=new Point();
　p=map.getCenter();
　PL=new Marker(p,"TestMark","","/sample/Shop.gif"); 
　iEvent.addListener(PL,"mouseover",function(){　 //當滑鼠經過Icon時顯示訊息視窗
　　　　map.openInfoWindow(p,"Hello World !!")
　}); 

　iEvent.addListener(PL,"mouseout",function(){　 //當滑鼠離開Icon時關閉訊息視窗
　　　　map.closeInfoWindow();
　}); 
　map.addOverlay(PL); 
範例
框選  Top

此範例我們加上框選功能，只要拖弋您的滑鼠，就可以拉出框線。

map = new iMap(document.getElementById("MapLayer")); 
map.centerMap(new Point(121.57,25.08),10);
map.addControl('LargeScaleBar');
map.setMapAction(1);  //框選功能

範例
簡易型訊息視窗  Top

　簡易型訊息視窗，提供您在地圖頁上，做更多的顯示運用。例：您可以使用此簡易型訊息視窗，來達成快速瀏覽地圖上地標的資訊。

map = new iMap(document.getElementById("MapLayer")); 
map.centerMap(new Point(121.52,25.035) ,7);
var iEvent=new Event();
b=new Marker(map.getCenter(),"Hello World")
iEvent.addListener(b,"mouseover",function(){b.openTip();});
iEvent.addListener(b,"mouseout",function(){b.closeTip();});
map.addOverlay(b);

範例
除了工具列以外的縮放功能 Top

　您除了可以使用本API工具列所提供的縮放列外，也可以使用ZoomTo(level)、ZoomIn()、ZoomOut()三個函數來達成。

function init() {
        map = new iMap(document.getElementById("MapLayer")); 
        map.centerMap(new Point(121.52,25.035) , 7); 
}
function LevelTo(Level) {
       map.ZoomTo(Level);
}
function AddLevel() {
      map.ZoomIn();
}
function StepLevel() {
      map.ZoomOut();
}

範例
地圖呈現大小  Top

　若您想設定您地圖在頁面上的顯示大小，我們建議您使用此項功能，此功能為我們正規置放地圖大小功能的內建函式。

function init() {
　　map = new iMap(document.getElementById("MapLayer")); 
　　map.centerMap(new Point(121.57,25.08),10);
　　map.resize(800,600);
}

範例
空間搜尋及生活週邊資訊  Top  

　此為提供一定位查詢界面及搜尋圖面上目前範圍之地標物件函式。

map = new iMap(document.getElementById("MapLayer")); 
map.centerMap(new Point(121.57,25.08),10);
map.addControl('LargeScaleBar');

poicontainer=document.getElementById("poilayer") 
var poi = new iInfo(poicontainer,2); //將div物件放置到生活周邊建構式裡「iInfo(物件,版型)，版型1為舊有的食衣住行，版型2為直行分類」
poi.setPosition(520,10); //setPosition(x,y), x、y可以設定此物件在div裡面的位置

landmarkcontainer=document.getElementById("landmark") 
landmarklist=document.getElementById("landmarkList") //此為地標查詢後出現的清單
var geo = new iGeoSearch(landmarkcontainer,landmarklist); //將div物件放置到地址、地標、路口查詢建構式裡
geo.setPosition(10,320); //setPosition(x,y), x、y可以設定此物件在div裡面的位置

範例
API 更新
    我們將會持續對 iMAP API 進行功能的增加及修正可能產生的bug與效率的增進，而更新後的 iMAP API 對您所開發的程式無須做任何變動即可套用在更新過後的 API上。

地址查詢、地標搜尋、交叉路口查詢等其他服務
　 若您需要 iMap API之地址查詢、地標搜尋或是交叉路口查詢等服務，請先申請Map API授權碼，再用此授權碼來開通您的座標搜尋服務，即可使用提供的函式來進行測試。
其它說明
控制項函數：addControl
addControl MapTypeControl：增加地圖類型控制列
LargeScaleBar：增加圖層控制列
SmallScaleBar：圖層控制列(增、減功能)
MidiumScaleBar：圖層控制列(數字控制)

MapTypeControl：地圖類型控制列

LargeScaleBar：完整縮放控制列

SmallScaleBar：簡易縮放控制列

MidiumScaleBar：數字縮放控制列
疑難排解

如果您使用iMap API所開發的程式無法順利運作，以下提供一些方法可能有助於您解決問題：

   •查看瀏覽器是否有顯示訊息(瀏覽器上所提供的 Javascript Console)
   •使用不同的瀏覽器觀看
   •檢查是否有呼叫Function名稱錯誤的問題
   •檢查是否有字或變數名稱打錯，Javascript 是有區分大小寫的語法
   •檢查函數的使用，是不是有誤或用錯方式

若以上的動作無法解決您的問題，請Mail至我們的服務窗口，我們會盡快協助您解決問題。
備註
　由於iMap API 目前還在增建許多功能，部份功能可能在測試時有未發現的 bug，您可以向我們的服務窗口回報錯誤或提出相關建議，我們會以此改進，並請耐心等待我們將bug修復，以提供您更完整及穩定的iMap API。

全國達康股份有限公司 版權所有  Copyright © 2000-2008 Trend-go.com Inc. All Rights Reserved.