以 Google 風格新增地標

此範例示範如何使用 Google 風格寫法建立地標，包含以下功能：
建立地標：使用 Google 撰寫風格，在地圖上新增一個地標
點擊地標建立訊息視窗：綁定 marker 的 click 事件，並透過 mapPlus.InfoWindow 建立彈窗
info
詳細使用參數說明請參考「地標」。
<!DOCTYPE html>

<html>
  <head>
      <meta charset=utf-8 />
      <title>以Google風格新增地標</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; }
      </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.52212916930945, 25.027326932236182], // 地圖中心點
            pitch: 0, // 視角傾斜角度, 0~85
            bearing: 0, // 視角旋轉角度, 0~360
            zoom: 7, // 縮放級別
            maxZoom: 18, // 最大縮放級別
            minZoom: 7, // 最小縮放級別
          });

          /* ══════════════════════════════════════════════════════════════════════════
          * 建立 Google 風格地標：
          - 調整 icon 可設置地標圖示。
          - 調整 position 可設置地標的經緯度座標。
          ══════════════════════════════════════════════════════════════════════════ */
          const marker = new mapPlus.Marker({
            // 地標圖示
            icon: "https://kw3dmap.localking.com.tw/favicon.ico",

            // 地標經緯度座標
            position: [121.52212916930945, 25.027326932236182],
          });


          /* ══════════════════════════════════════════════════════════════════════════
          * 點擊地標建立訊息視窗
          ══════════════════════════════════════════════════════════════════════════ */
          const infoWindow = new mapPlus.InfoWindow({
            content: "Here is Kingwaytek!",
          });
          
          marker.addListener("click", () => {
            infoWindow.open({
              anchor: marker,
            });
          });

      </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.52212916930945, 25.027326932236182], // 地圖中心點
      pitch: 0, // 視角傾斜角度, 0~85
      bearing: 0, // 視角旋轉角度, 0~360
      zoom: 7, // 縮放級別
      maxZoom: 18, // 最大縮放級別
      minZoom: 7, // 最小縮放級別
    });

    /* ══════════════════════════════════════════════════════════════════════════
    * 建立 Google 風格地標：
    - 調整 icon 可設置地標圖示。
    - 調整 position 可設置地標的經緯度座標。
    ══════════════════════════════════════════════════════════════════════════ */
    const marker = new mapPlus.Marker({
      // 地標圖示
      icon: "https://kw3dmap.localking.com.tw/favicon.ico",

      // 地標經緯度座標
      position: [121.52212916930945, 25.027326932236182],
    });


    /* ══════════════════════════════════════════════════════════════════════════
    * 點擊地標建立訊息視窗
    ══════════════════════════════════════════════════════════════════════════ */
    const infoWindow = new mapPlus.InfoWindow({
      content: "Here is Kingwaytek!",
    });

    marker.addListener("click", () => {
      infoWindow.open({
        anchor: marker,
      });
    });

</script>

<style>
  body { margin: 0; padding: 0; }
  #map { width: 100vw; height: 100vh; }
</style>