介紹

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

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

範例

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

設定訊息視窗內容

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

範例

js
// 訊息視窗 文字（左）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。

範例

js
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();});