訊息視窗

此範例示範如何在地圖上建立與顯示訊息視窗，包含以下功能：
建立地圖後顯示預設訊息：於 style.load 後顯示預設 InfoWindow
點擊 POI 顯示資訊：透過 queryRenderedFeatures() 取得點擊的 POI 資料，並使用 mapPlus.InfoWindow 建立彈跳視窗
info
詳細使用參數說明請參考「訊息視窗」。
<!DOCTYPE html>

<html>
  <head>
      <meta charset=utf-8 />
      <title>訊息視窗</title>
      <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
      <script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
      <style>
        body { margin: 0; padding: 0; }
        #map { width: 100vw; height: 100vh; }
        .kwmap-popup-content,
        .kwmap-popup-close-button {
          background-color: black;
        }
        .kwmap-popup-anchor-bottom > .kwmap-popup-tip,
        .kwmap-popup-anchor-bottom-left > .kwmap-popup-tip,
        .kwmap-popup-anchor-bottom-right > .kwmap-popup-tip {
          border-top-color: black;
        }
        .kwmap-popup-anchor-top > .kwmap-popup-tip,
        .kwmap-popup-anchor-top-left > .kwmap-popup-tip,
        .kwmap-popup-anchor-top-right > .kwmap-popup-tip {
          border-bottom-color: black;
        }
        .kwmap-popup-anchor-left > .kwmap-popup-tip {
          border-right-color: black;
        }
        .kwmap-popup-anchor-right > .kwmap-popup-tip {
          border-left-color: black;
        }
      </style>
  </head>

  <body>
      <div id="map"></div>

      <script type="module">
        const map = await new mapPlus(document.getElementById("map"), {
          accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
          accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
          style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
          center: [121.5648431044541, 25.03407570226979], // 地圖中心點
          pitch: 0, // 視角傾斜角度, 0~85
          bearing: 0, // 視角旋轉角度, 0~360
          zoom: 15.5, // 縮放級別
          maxZoom: 18, // 最大縮放級別
          minZoom: 7, // 最小縮放級別
        });

        map.on("style.load", () => {
          /* ══════════════════════════════════════════════════════════════════════════
          * 顯示預設彈跳視窗：
          - 調整 position 可移動訊息視窗位置。
          - 調整 content 可變更訊息視窗的顯示內容。
          ══════════════════════════════════════════════════════════════════════════ */
          new mapPlus.InfoWindow({
            // 經緯度座標
            position: [121.5648431044541, 25.03407570226979], 

            // 訊息視窗內容
            content: "開始使用KWMAP !", 

            // 添加訊息視窗動畫效果
            animation: mapPlus.Animation.GROW, 
          }).open();


          // 點擊 POI 可顯示彈跳視窗
          map.on("click", ({ point }) => {
            // 取得點擊的 POI 資料
            const features = map.queryRenderedFeatures(point);
            if (features.length === 0) return;
          
            const [{
              properties: { name, alladdr }, 
              geometry: { coordinates }
            }] = features;
            if (!name || !alladdr) return;
          
            // 建立彈跳視窗
            new mapPlus.InfoWindow({
              position: coordinates,
              content: "地名：" + name + "<br>地址：" + alladdr,
              animation: mapPlus.Animation.GROW,
            }).open();
          });
        });

      </script>
  </body>
</html>

<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>

<script type="module">
  const map = await new mapPlus(document.getElementById("map"), {
    accessKey: 'get_your_key', // 聯絡勤崴國際，取得專屬key
    accessToken: 'get_your_token', // 聯絡勤崴國際，取得專屬token
    style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt', // 樣式
    center: [121.5648431044541, 25.03407570226979], // 地圖中心點
    pitch: 0, // 視角傾斜角度, 0~85
    bearing: 0, // 視角旋轉角度, 0~360
    zoom: 15.5, // 縮放級別
    maxZoom: 18, // 最大縮放級別
    minZoom: 7, // 最小縮放級別
  });

  map.on("style.load", () => {
    /* ══════════════════════════════════════════════════════════════════════════
    * 顯示預設彈跳視窗：
    - 調整 position 可移動訊息視窗位置。
    - 調整 content 可變更訊息視窗的顯示內容。
    ══════════════════════════════════════════════════════════════════════════ */
    new mapPlus.InfoWindow({
      // 經緯度座標
      position: [121.5648431044541, 25.03407570226979], 

      // 訊息視窗內容
      content: "開始使用KWMAP !", 

      // 添加訊息視窗動畫效果
      animation: mapPlus.Animation.GROW, 
    }).open();


    // 點擊 POI 可顯示彈跳視窗
    map.on("click", ({ point }) => {
      // 取得點擊的 POI 資料
      const features = map.queryRenderedFeatures(point);
      if (features.length === 0) return;

      const [{
        properties: { name, alladdr }, 
        geometry: { coordinates }
      }] = features;
      if (!name || !alladdr) return;

      // 建立彈跳視窗
      new mapPlus.InfoWindow({
        position: coordinates,
        content: "地名：" + name + "<br>地址：" + alladdr,
        animation: mapPlus.Animation.GROW,
      }).open();
    });
  });

</script>

<style>
  body { margin: 0; padding: 0; }
  #map { width: 100vw; height: 100vh; }
  .kwmap-popup-content,
  .kwmap-popup-close-button {
    background-color: black;
  }
  .kwmap-popup-anchor-bottom > .kwmap-popup-tip,
  .kwmap-popup-anchor-bottom-left > .kwmap-popup-tip,
  .kwmap-popup-anchor-bottom-right > .kwmap-popup-tip {
    border-top-color: black;
  }
  .kwmap-popup-anchor-top > .kwmap-popup-tip,
  .kwmap-popup-anchor-top-left > .kwmap-popup-tip,
  .kwmap-popup-anchor-top-right > .kwmap-popup-tip {
    border-bottom-color: black;
  }
  .kwmap-popup-anchor-left > .kwmap-popup-tip {
    border-right-color: black;
  }
  .kwmap-popup-anchor-right > .kwmap-popup-tip {
    border-left-color: black;
  }
</style>