Skip to main content

實例方法

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

setContent​

setContent(content)

設定訊息視窗的內容。

參數

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

範例

// 新增訊息視窗
const infoWindow = new mapPlus.InfoWindow({
  position: [121.52212916930945, 25.027326932236182],
});

// 設定訊息視窗內容
infoWindow.setContent('Here is Kingwaytek!');

// 開啟訊息視窗
infoWindow.open();

setPosition​

setPosition(lngLat)

設定訊息視窗的座標。

參數

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

範例

// 新增訊息視窗
const infoWindow = new mapPlus.InfoWindow({
  content: 'Here is Kingwaytek!',
});

// 設定訊息視窗座標
infoWindow.setPosition([121.52212916930945, 25.027326932236182]);

// 開啟訊息視窗
infoWindow.open();

getPosition​

getPosition()

取得訊息視窗的座標。

回傳

object：經緯度座標。

範例

// 新增訊息視窗
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。

範例

<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。

範例

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

// 移除訊息視窗 className
infoWindow.removeClassName('customize-info-window');

setAnimation​

setAnimation(animation)

設定地標的動畫。

參數

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

範例

// 新增訊息視窗
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}) 的座標位置。

範例

// 新增地標
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()

關閉訊息視窗。

範例

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

infoWindow.open();

setTimeout(() => {
  // 關閉訊息視窗
  infoWindow.close();
}, 5000);