地標

調用 new mapPlus.Marker(options)，開始使用地圖地標API。

開始使用

調用 new mapPlus.Marker(options)，開始使用地圖地標API。

options (object): 必填，地標的參數。

Name	Description
options.position `object`	必填，經緯度座標
options.icon `string` `object` `HTMLElement`	選填，可設定簡易 URL，或是詳細設定 Marker 參數，又或是使用 `HTMLElement` 完全客製化 Marker，以下進行詳細說明。未填則為 mapPlus 預設 Marker。
options.label `string` `object`	選填，地標 icon 上顯示的文字。
options.className `string`	選填，可添加地標的 `className`。
options.anchor `string`	選填，設定錨點，可設定為 `top`、`top-left`、`top-right`、`bottom`、`bottom-left`、`bottom-right`、`left`、`right`、`center`，預設為 `center`。
options.scale `number`	選填，設定縮放比例，預設為 `1`。
options.rotation `number`	選填，設定旋轉角度，預設為 `0`。
options.rotationAlignment `string`	選填，旋轉角對齊，可設定為 `auto` 與視角對，或是 `map` 與地圖對齊，預設為 `auto`。
options.pitchAlignment `string`	選填，傾角對齊，可設定為 `auto` 與視角對齊，或是 `map` 與地圖對齊，預設為 `auto`。
options.draggable `boolean`	選填，設定地標是否可被拖曳，預設為 `false`。
options.clickable `boolean`	選填，設定地標是否可被點選，預設為 `true`。注意：若設定為 `false`，地標將無法進行拖曳以及觸發任何點擊事件。
options.altitude `number`	選填，地標的海拔高度，單位為公尺，預設為 `0`。
options.title `string`	選填，滑鼠移至地標上時，會顯示的工具提示。
options.animation `object`	選填，可添加地標的動畫，可套用 `mapPlus.Animation.BOUNCE` 或是 `mapPlus.Animation.DROP`。※ 注意：若有設定 `rotation`、`rotationAlignment`、`pitchAlignment` 屬性，會與動畫功能衝突。
options.useWithClusterer `boolean`	選填，設定是否與「地標叢集 MarkerClusterer」搭配使用，可優化叢集圖效能，預設為 `false`，詳情請參考 MarkerClusterer。 ※注意：若設定為 `ture`，地標將無法單獨使用。

Examples

點選「開始使用」，即可開始操作地圖

圖示

基本使用

可設定簡易 URL，或是詳細設定 Marker 參數，又或是使用 HTMLElement 完全客製化 Marker。未填則為 mapPlus 預設 Marker。

圖片 URL（左一）: 可僅設定 URL。
圖片 URL 與設定（左二）:

url: Marker icon 的 url。
size: 可設定 width 與 height。

使用 SVG（右二）:

path: 設定 SVG Path。
樣式設定: 使用 SVG Style Property 設定 Marker 樣式。

使用 HTML Element（右一）: 可帶入 HTMLElement，完全客製化 Marker 樣式。

Examples

點選「開始使用」，即可開始操作地圖

進階使用

若需要高度客製化地標樣式，則會建議帶入 HTMLElement。

Examples

點選「開始使用」，即可開始操作地圖

標籤

設定地標 icon 上顯示的文字。

簡易設定（左）: 可僅設定文字。
詳細設定（右）:

text: 設定文字內容。
樣式設定: 使用 HTMLElement Style Property 設定 label 樣式。

Examples

點選「開始使用」，即可開始操作地圖

海拔高度

設定地標的海拔高度。

Examples

點選「開始使用」，即可開始操作地圖

動畫

可添加地標的動畫，可套用 mapPlus.Animation.BOUNCE 或是 mapPlus.Animation.DROP。

Examples

點選「開始使用」，即可開始操作地圖

實例方法

addListener: 新增地標的事件監聽器。
removeListener: 移除地標的事件監聽器。
setAnimation: 設定地標的動畫。
setAltitude: 設定地標的海拔高度。
addClassName: 添加地標的 className。
removeClassName: 移除地標的 className。
toggleClassName: 切換地標的 className。
setDraggable: 設定地標是否可拖曳。
setClickable: 設定地標是否可點選。
remove: 移除地標。

addListener

addListener(type, listener)

新增地標的事件監聽器。

Parameters

type (string): 事件類別，與 DOM 原生事件一致。
listener (function): 需事件綁定的函數。

Examples

removeListener

removeListener(type, listener)

移除地標的事件監聽器。

Parameters

type (string): 事件類別，與 DOM 原生事件一致。
listener (function): 需解除事件綁定的函數。

Examples

setAnimation

setAnimation(animation)

設定地標的動畫。

Parameters

animation (object): 動畫類型，可套用 mapPlus.Animation.BOUNCE 與 mapPlus.Animation.DROP。

Examples

setAltitude

setAltitude(altitude)

設定地標的海拔高度。

Parameters

altitude (number): 海拔高度，單位為公尺。

Examples

addClassName

addClassName(className)

添加地標的 className。

Parameters

className (string): 要添加的 className。

Examples

removeClassName

removeClassName(className)

移除地標的 className。

Parameters

className (string): 要移除的 className。

Examples

toggleClassName

toggleClassName(className)

添加或移除地標的 className，取決於地標目前是否有該 className。

Parameters

className (string): 要切換的 className。

Examples

setDraggable

setDraggable(isDraggable)

設定地標是否可拖曳。

Parameters

isDraggable (boolean): 是否可進行拖曳。

Examples

setClickable

setClickable(isClickable)

設定地標是否可點選。

Parameters

isClickable (boolean): 是否可進行點選。

Examples

remove

remove()

移除地標。

Examples