Skip to main content

介紹

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

參數說明​

  • options (object): 必填，訊息視窗的參數。

    參數描述
    options.position object必填，經緯度座標。
    options.content string HTMLElement必填，訊息視窗內容，可帶入文字，或是使用 HTMLElement 帶入 InfoWindow。
    options.maxWidth string選填，訊息視窗的最大寬度，預設為 50%。
    options.closeButton boolean選填，訊息視窗是否要有關閉按鈕，預設為 true。
    options.closeOnClick boolean選填，點選地圖是否要關閉視窗，預設為 true。
    options.closeOnMove boolean選填，移動地圖是否要關閉視窗，預設為 false。
    options.animation object選填，可添加地標的動畫，可套用 mapPlus.Animation.GROW。

範例

const infoWindow = new mapPlus.InfoWindow({
  position: [121.52212916930945, 25.027326932236182],
  closeOnClick: false,
  closeButton: false,
  content: 'Here is Kingwaytek!',
});

infoWindow.open();

設定訊息視窗內容​

訊息視窗內容，可帶入文字，或是使用 HTMLElement 帶入 InfoWindow。

範例

// 訊息視窗 文字（左）
new mapPlus.InfoWindow({
  position: [121.51812916930945, 25.027326932236182],
  closeOnClick: false,
  closeButton: false,
  content: 'InfoWindow A',
}).open();

// 訊息視窗 innerHTML（中）
new mapPlus.InfoWindow({
  position: [121.52212916930945, 25.027326932236182],
  closeOnClick: false,
  closeButton: false,
  content: '<p style="color: red;">InfoWindow B</p>',
}).open();

// 訊息視窗 HTMLElement（右）
const p = document.createElement('p');
p.style.color = 'blue';
p.innerText = 'InfoWindow C';

new mapPlus.InfoWindow({
  position: [121.52612916930945, 25.027326932236182],
  closeOnClick: false,
  closeButton: false,
  content: p,
}).open();

動畫​

可添加地標的動畫，可套用 mapPlus.Animation.GROW。

範例

const options = {
  closeOnClick: true,
  closeButton: true,
  animation: mapPlus.Animation.GROW,
}

// 新增訊息視窗
new mapPlus.InfoWindow({
  position: [121.52212916930945, 25.027326932236182],
  content: '請任意點選地圖！',
  ...options,
}).open();

// 點擊地圖，顯示訊息視窗
map.on('click', ({lngLat}) => {
  new mapPlus.InfoWindow({
    position: lngLat,
    content: '您點選了這裡！',
    ...options,
  }).open();
});