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),Map API會自動照該物件的大小將地圖嵌入。

疑難排解
如果您使用iMap API所開發的程式無法順利運作,以下提供一些方法可能有助於您解決問題:
   •查看瀏覽器是否有顯示訊息 (瀏覽器上所提供的 Javascript Console)
   •使用不同的瀏覽器觀看
   •檢查是否有呼叫Function名稱錯誤的問題
   •檢查是否有字或變數名稱打錯,Javascript變數、Function等都 需區分大小寫
   •檢查函數的使用,是不是有誤用或少輸入參數
若以上的動作無法解決您的問題,請Mail至我們的服務窗口,我們會盡快協助您解決問題。
另外由於Map API目前還在增建許多功能,部份功能可能在測試時有未發現的 bug,您可以向我們的服務窗口回報錯誤或提出相關建議,我們會盡速改進,並請耐心等待我們將bug修復,以提供您更完整及穩定的Map API。
範例目錄
基本 (The Basics)
取得中心點座標 (Get center of the map)
取得地址座標 (Get a address coordinates.)
取得交叉路口座標 (Get a cross road coordinates.)
取得地標座標 (Get a landmark coordinates.)
增加地圖控制項 (Adding Controls to the Map)
監聽事件 (Event Listeners)
訊息視窗 (Opening an InfoWindow)
修改多邊形範圍 (Change Polygon Overlay Shape)
點擊icon時出現訊息視窗 (Add mouse click icon to Opening an inforWindow)
滑鼠移過icon時出現訊息視窗 (Add mouse over icon to Opening an inforWindow) 
框選 (Marquee select)
自定義標記 (Custom Markers) NEW
標記群聚 (Marker Clusterer) NEW
縮放地圖 (The zoomable map)
增加標記 (Add Markers Overlay)
增加線段 (Add Polyline Overlay)
增加多邊形範圍 (Add Polygon Overlay)
在多邊形範圍上顯示訊息 (Display Info Windows Above Overlays)
簡易型訊息視窗 (Simplified InfoWindow)
地圖呈現大小 (Customize map size)
空間搜尋及生活周邊資訊 (Spatial search & POI vincinitie
自訂生活周邊資訊 (Customize POI vincinities)
取得靜態圖 (Get a inactive map)
分析中心物件至週遭地標之距離 (Analyse the distance between a central point and its vincinties)  
自訂簡易型訊息視窗位置 (Customize a position of Simplified InfoWindow)
範例

基本 (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             

               
看範例

取得地址座標(Get a address coordinates)   Top

可以取得您輸入的地址的座標。

map = new iMap (document.getElementById ("MapLayer")); 
getAddrXY2('新北市中和區中正路716號',funA);
function funA(obj){
    var x = obj.locate.lng; //x座標
    var y = obj.locate.lat; //y座標
}
看範例

取得交叉路口座標 (Get a cross road coordinates)   Top

可以取得您輸入的交叉路口的座標。

map = new iMap (document.getElementById ("MapLayer")); 
getCroadXY2('新北市','中和區','中正路','連城路' ,funA);
function funA(obj){
    var x = obj.locate.lng; //x座標
    var y = obj.locate.lat; //y座標
}
看範例

取得地標座標 (Get a landmark coordinates)   Top

可以取得您輸入的地標的座標。

map = new iMap (document.getElementById ("MapLayer")); 
getMarkXY2('台北市','中正區','火車站' ,funA);
function funA(obj){
    var x = obj.locate.lng; //x座標
    var y = obj.locate.lat; //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,contenttip,icon,MID)這個函數來建置,圖形為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.015;i=i+0.005){ 
        content="marker="+i; 
        m=new Marker (p,"TestMark","","http://api.map.com.tw/sample/Shop.gif","Position1"); ;
        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","","http://api.map.com.tw/sample/Shop.gif","Position1");  
   iEvent.addListener (PL,"click",function (){                //Icon的單擊作用
              PL.openInfoWindow ()
   }); 
   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","","http://api.map.com.tw/sample/Shop.gif","Position1");
iEvent.addListener (PL,"mouseover",function (){  //當滑鼠經過Icon時顯示訊息視窗
PL.openInfoWindow ()
}); 

iEvent.addListener (PL,"mouseout",function (){  //當滑鼠離開Icon時關閉訊息視窗
PL.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);  //框選功能

看範例

自定義標記(Custom Markers)Top
此範例可以給一html內容與座標給自定義標記,即可在地圖此座標上顯示自定義標記內容
var con = "<img src="http://api.map.com.tw/images/dialogbox.png"/>
var m = new CustomMarker(p,con,id);
map.addOverlay(m);
看範例
標記群聚 (Marker Clusterer) Top
此範例通常使用在地圖上有太多Markers,造成地圖畫面混亂。這時您可以做一個Markers的陣列,並使用MarkerClusterer將此陣列群聚起來,保持地圖畫面乾淨。
var p = map.getCenter();
for (i=0;i<=0.15;i=i 0.0005){
  content="marker=" i;
  var p2 = new Point(p.x i,p.y i)
  var m=new Marker (p2,"TestMark","","http://www.map.com.tw/topic/exam.png",content);
  map.addOverlay(m);
  arr.push(m);
}
markerClusterer = new MarkerClusterer(arr,{
  gridSize:120,//default
  maxZoom:11//default
});
map.addOverlay(markerClusterer);
看範例

簡易型訊息視窗  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 (),"","testSimpleMark","http://api.map.com.tw/sample/Shop.gif","Position1");
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裡面的位置

看範例

分析中心物件至周遭地標之距離  Top    

使用Function:Analysis_LifePOI ("傳入要分析點的座標" , "距離點的半徑距離 (設定'1',距離為250公尺。設定'2',距離為500公尺。設定'3',距離為750公尺。)" , "要分析的類別陣列" , "訊息返回function" )。分析類別目前提供「schoolhospitalmrthsrparkfinancesupermarket」。 

呼叫

var sunclass = new Array ("school","mrt")
Analysis_LifePOI (new Point (121.52,25.035),'3',sunclass,"MapS")

接收

function MapS (obj){

 for  (i=0;i<obj.AnalysisInfo.length;i++){

obj.AnalysisInfo[i].PoiClass         //類別

obj.AnalysisInfo[i].iLandmark  //附近地標名稱

obj.AnalysisInfo[i].Range            //距離

 }

}

範例1  範例2

自訂生活周邊物件  Top    

myClass為生活周邊物件要顯示的代號。「生活周邊物件類別代號表

//myLife_POI (new Array (放入要顯示的物件代號))

myLife_POI (new Array ('H0600001','F','TOK'))

看範例

自訂簡易型訊息視窗位置 Top    

setTipWindowPos:提供使用者自訂簡易型視窗位置,提供更多元的資訊顯示方式。

//設定簡易型訊息視窗方向,提供「Top、Bottom、Left、Right」四個方位視窗位置,預設為Top

//並提供簡易型訊息視窗位置與POI物件之距離的調整

//使用方式如下map.setTipWindowPos (位置,x軸移動,y軸動)

map.setTipWindowPos ('Right',0,0)

看範例

取得靜態地圖  Top    

/*
Function CaptureMap (centerX,centerY,zoomLevel,imageWidth,imageHeight,imageType,showSymbol,symbolType,symbolX,symbolY,back_function)

參數說明
centerX 中心點X座標
centerY 中心點Y座標
zoomLevel 指定要出第幾層圖,可為1∼12 ,預設為8
imageWidth 要產出的圖片寬度,可為30∼800 ,預設為300
imageHeight 要產出的圖片寬度,可為30∼600 ,預設為300
imageType 要產出的圖片種類,可為gif或jpg ,設定「1」為.gif檔,設定「2」為.jpg檔,預設為 1
showSymbol 是否要顯示符號 , 預設為不顯示,輸入1 = true 輸入 2 =false
symbolType 預設為1 (中心點為紅點)
symbolX 符號點X座標
symbolY 符號點Y座標
back_function 要接收資訊的function
#obj.imgPathInfo.webPath:取得圖片在web上放置之路徑 (需即時存檔,圖檔伺服器只會保留一段時間,用法請參閱範例。)
*/

CaptureMap (map.getCenter ().x, map.getCenter ().y , map.getZoomLevel (), 400, 300, 1, 2 , 1 , map.getCenter ().x , map.getCenter ().y , "UrlPath");

看範例

API 更新
  

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

地址查詢、地標搜尋、交叉路口查詢等其他服務

若您需要 iMap API之地址查詢、地標搜尋或是交叉路口查詢等服務,請先申請Map API授權碼,再用此授權碼來開通您的座標搜尋服務,即可使用提供的函式來進行測試。

其它說明

控制項函數:addControl
addControl LargeScaleBar:增加圖層控制列
SmallScaleBar:圖層控制列 (增、減功能)
MidiumScaleBar:圖層控制列 (數字控制)

LargeScaleBar:
完整縮放控制列

SmallScaleBar:
簡易縮放控制列

MidiumScaleBar:
數字縮放控制列

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