實例方法

調用 new mapPlus.InfoWindow(options)，開始使用地圖訊息視窗API。

實例方法描述
setContent設定訊息視窗的內容。
setPosition設定訊息視窗的座標。
getPosition取得訊息視窗的座標。
setAnimation設定訊息視窗的動畫。
addClassName添加訊息視窗的 className。
removeClassName移除訊息視窗的 className。
open開啟訊息視窗。
close關閉訊息視窗。

setContent

setContent(content)

設定訊息視窗的內容。

參數

  • content (string | HTMLElement): 可帶入文字，或是使用 HTMLElement 帶入 InfoWindow。

範例

javascript
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  position: [121.52212916930945, 25.027326932236182],});
// 設定訊息視窗內容infoWindow.setContent('Here is Kingwaytek!');
// 開啟訊息視窗infoWindow.open();

setPosition

setPosition(lngLat)

設定訊息視窗的座標。

參數

  • lngLat (object)：經緯度座標。

範例

javascript
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  content: 'Here is Kingwaytek!',});
// 設定訊息視窗座標infoWindow.setPosition([121.52212916930945, 25.027326932236182]);
// 開啟訊息視窗infoWindow.open();

getPosition

getPosition()

取得訊息視窗的座標。

回傳

object：經緯度座標。

範例

javascript
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  content: 'Here is Kingwaytek!',  position: [121.52212916930945, 25.027326932236182],});
infoWindow.open();
// 取得訊息視窗座標const position = infoWindow.getPosition();console.log(position);// {lat: 25.027326932236182, lng: 121.52212916930945}

addClassName

addClassName(className)

添加訊息視窗的 className。

參數

  • className (string)：要添加的 className。

範例

html
<style>  /* 可調整訊息視窗關閉按鈕大小 */  .customize-info-window .kwmap-popup-close-button {    font-size: 18px;  }</style>
<script type="module">  // 新增訊息視窗  const infoWindow = new mapPlus.InfoWindow({    content: 'Here is Kingwaytek!',    position: [121.52212916930945, 25.027326932236182],  });
  // 添加訊息視窗 className  infoWindow.addClassName('customize-info-window');</script>

removeClassName

removeClassName(className)

移除訊息視窗的 className。

參數

  • className (string)：要移除的 className。

範例

javascript
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  content: 'Here is Kingwaytek!',  position: [121.52212916930945, 25.027326932236182],});
// 移除訊息視窗 classNameinfoWindow.removeClassName('customize-info-window');

setAnimation

setAnimation(animation)

設定地標的動畫。

參數

  • animation (object)：動畫類型，可套用 mapPlus.Animation.GROW。

範例

javascript
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  position: [121.52212916930945, 25.027326932236182],  content: 'Here is Kingwaytek!',});
// 新增動畫infoWindow.setAnimation(mapPlus.Animation.GROW);
// 顯示訊息視窗infoWindow.open();

open

open(options)

開啟訊息視窗。

參數

  • options (object)：選填，開啟訊息視窗的參數。

    參數描述
    options.anchor object選填，訊息視窗需顯示在對應的地標，未設定則使用 InfoWindow({position}) 的座標位置。

範例

js
// 新增地標const marker = new mapPlus.Marker({  position: [121.52212916930945, 25.027326932236182],});
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  content: 'Here is Kingwaytek!',});
// 地標新增事件marker.addListener('click', () => {  // 顯示訊息視窗  infoWindow.open({    anchor: marker,  });});

close

close()

關閉訊息視窗。

範例

javascript
// 新增訊息視窗const infoWindow = new mapPlus.InfoWindow({  position: [121.52212916930945, 25.027326932236182],  content: 'Here is Kingwaytek!',});
infoWindow.open();
setTimeout(() => {  // 關閉訊息視窗  infoWindow.close();}, 5000);