Skip to main content

介紹

於註冊取得專屬的 Key 和 Token 後，並安裝完 mapPlus，即可使用以下程式碼，快速建立地圖。

參數說明​

await new mapPlus(container, options)

地圖為非同步載入，建立地圖時，需使用 await 等待地圖載入完成。

參數：

  • container string|HTMLElement : 地圖的容器，可填選 id 名稱或是 HTMLElement。

  • options Object :

    參數描述
    options.accessKey string地圖的 Key，聯絡勤崴國際團隊，取得專屬 Key。
    options.accessToken string地圖的 Token，取得專屬 Key 後，於 'Get Key and Token' 頁面取得專屬的 Token。
    options.style string地圖的樣式，接受 .etxt 格式資料。
    options.center number[]地圖的初始的中心點，格式為 [經度, 緯度]。
    options.trackResize boolean若為 true，地圖會在瀏覽器視窗變更大小時自動調整大小，預設為 true。
    options.zoom number地圖的初始縮放級別 (0-24)，預設為 16。
    options.minZoom number地圖的最小縮放級別 (0-24)，預設為 7。
    options.maxZoom number地圖的最大縮放級別 (0-24)，預設為 16.99。
    options.scrollZoom boolean若為 true，將啟用「滾動縮放」互動，預設為 true。
    options.boxZoom boolean若為 true，將啟用「方框縮放」互動，預設為 true。
    options.doubleClickZoom boolean若為 true，將啟用「雙擊縮放」互動，預設為 true。
    options.touchZoomRotate boolean若為 true，將啟用「捏取以旋轉和縮放」互動，預設為 true。
    options.pitch number地圖的初始傾斜角 (0-85)，預設為 0。
    options.minPitch number地圖的最小傾斜角 (0-85)，預設為 0。
    options.maxPitch number地圖的最大傾斜角 (0-85)，預設為 60。
    options.pitchWithRotate boolean若為 false，使用者將無法透過「拖曳以旋轉」互動來控制地圖的傾斜角，預設為 true。
    options.touchPitch boolean若為 true，將啟用「拖曳以傾斜」互動，預設為 true。
    options.bearing number地圖的初始旋轉角，以度數計，預設為 0。
    options.bearingSnap number定地圖的方向(方位)在多少度內會貼齊北方。例如，若 bearingSnap 為 7，當使用者將地圖旋轉在距離北方 7 度以內，地圖會自動貼齊正北方向，預設為 7。
    options.dragRotate boolean若為 true，將啟用「拖曳以旋轉」互動，預設為 true。
    options.dragPan boolean若為 true，將啟用「拖曳以平移」互動，預設為 true。
    options.keyboard boolean若為 true，將啟用鍵盤快捷鍵，預設為 true。
    options.interactive boolean若為 false，地圖將不會附加滑鼠、觸控或鍵盤監聽器，因此不會對互動作出回應，預設為 true。
    options.bounds Array null undefined地圖的初始範圍。如果指定了 bounds，它將覆蓋建構選項中的center和zoom，預設為 undefined。
    options.maxBounds Array null undefined若設定，地圖將受限於指定的範圍內，預設為 undefined。

參數範例​

基本使用​

const map = await new mapPlus(document.getElementById('map'), {
    accessKey: 'get_your_key',
    accessToken: 'get_your_token',
    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
});

進階使用​

const map = await new mapPlus(document.getElementById('map'), {
    accessKey: 'get_your_key',
    accessToken: 'get_your_token',
    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
    center: [120.5, 24.0],
    trackResize: true,
    zoom: 16,
    minZoom: 7,
    maxZoom: 16.99,
    scrollZoom: true,
    boxZoom: true,
    doubleClickZoom: true,
    touchZoomRotate: true,
    pitch: 0,
    minPitch: 0,
    maxPitch: 60,
    pitchWithRotate: true,
    touchPitch: true,
    bearing: 0,
    bearingSnap: 7,
    dragRotate: true,
    dragPan: true,
    keyboard: true,
    interactive: true,
    maxBounds: [[120.0, 23.5], [121.0, 24.5]],
    // bounds: [[120.5, 24.0], [121.0, 24.5]], 若有設定 bounds，center 和 zoom 將被覆蓋
});

事件類型​

使用 on()、off()、once() 會綁定的事件類別：

事件描述
mousedown滑鼠按下事件
mouseup滑鼠放開事件
mouseover滑鼠移入事件
mouseout滑鼠移出事件
mousemove滑鼠移動事件
click點擊事件
dblclick雙擊事件
contextmenu右鍵點擊事件
touchstart觸控開始事件
touchend觸控結束事件
touchcancel觸控取消事件
wheel滾輪事件
resize視窗大小調整事件
remove圖層移除事件
touchmove觸控移動事件
movestart地圖移動開始事件
move地圖移動事件
moveend地圖移動結束事件
dragstart拖曳開始事件
drag拖曳事件
dragend拖曳結束事件
zoomstart縮放開始事件
zoom縮放事件
zoomend縮放結束事件
rotatestart旋轉開始事件
rotate旋轉事件
rotateend旋轉結束事件
pitchstart傾斜開始事件
pitch傾斜事件
pitchend傾斜結束事件
boxzoomstart方框縮放開始事件
boxzoomend方框縮放結束事件
boxzoomcancel方框縮放取消事件
webglcontextlostWebGL 上下文遺失事件
webglcontextrestoredWebGL 上下文恢復事件
load載入事件
render渲染事件
idle閒置事件
error錯誤事件
data數據事件
styledata樣式數據事件
sourcedata來源數據事件
dataloading數據載入中事件
styleimagemissing樣式圖片遺失事件
dataabort數據中斷事件
sourcedataabort來源數據中斷事件

事件監聽範例​

新增事件監聽​

const map = await new mapPlus(document.getElementById('map'), {
  accessKey: 'get_your_key',
  accessToken: 'get_your_token',
  style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
});

// 新增事件監聽
map.on('click', () => {
  console.log('監聽點擊事件！');
});

移除事件監聽​

const map = await new mapPlus(document.getElementById('map'), {
  accessKey: 'get_your_key',
  accessToken: 'get_your_token',
  style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
});

// 新增事件監聽
const handleMapClick = () => {
  console.log('監聽點擊事件！');
};
map.on('click', handleMapClick);

// 刪除該事件監聽
map.off('click', handleMapClick);

新增一次性事件監聽​

const map = await new mapPlus(document.getElementById('map'), {
  accessKey: 'get_your_key',
  accessToken: 'get_your_token',
  style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
});

// 新增事件監聽（一次性）
map.once('click' , () => {
  console.log('只能監聽點擊事件一次！');
});