基本地圖
此範例示範如何快速建立一張基本地圖，包含以下功能：
- 初始化地圖：使用
#map作為地圖載入容器，並設定初始地圖參數（指定中心點、縮放層級、視角與旋轉角度...）
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; }
</style>
</head>
<body>
<div id="map"></div>
<script type="module">
/* ══════════════════════════════════════════════════════════════════════════
* 初始化地圖：
- 調整 center 可設置地圖的初始中心點。
- 調整 pitch 可設置地圖的視角傾斜角度。
- 調整 bearing 可設置地圖的視角旋轉角度。
- 調整 zoom/maxZoom/minZoom 可分別設置地圖的初始/最大/最小縮放級別。
══════════════════════════════════════════════════════════════════════════ */
const map = await new mapPlus(document.getElementById("map"), {
// 聯絡勤崴國際，取得專屬 key
accessKey: 'get_your_key',
// 聯絡勤崴國際，取得專屬 token
accessToken: 'get_your_token',
// 樣式
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
// 地圖中心點
center: [121.53559860212545, 25.029308142529132],
// 視角傾斜角度（0-85）
pitch: 0,
// 視角旋轉角度（0-360）
bearing: 0,
// 縮放級別（0-24）
zoom: 14,
// 最大縮放級別（0-24）
maxZoom: 18,
// 最小縮放級別（0-24）
minZoom: 7,
});
</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">
/* ══════════════════════════════════════════════════════════════════════════
* 初始化地圖：
- 調整 center 可設置地圖的初始中心點。
- 調整 pitch 可設置地圖的視角傾斜角度。
- 調整 bearing 可設置地圖的視角旋轉角度。
- 調整 zoom/maxZoom/minZoom 可分別設置地圖的初始/最大/最小縮放級別。
══════════════════════════════════════════════════════════════════════════ */
const map = await new mapPlus(document.getElementById("map"), {
// 聯絡勤崴國際，取得專屬 key
accessKey: 'get_your_key',
// 聯絡勤崴國際，取得專屬 token
accessToken: 'get_your_token',
// 樣式
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
// 地圖中心點
center: [121.53559860212545, 25.029308142529132],
// 視角傾斜角度（0-85）
pitch: 0,
// 視角旋轉角度（0-360）
bearing: 0,
// 縮放級別（0-24）
zoom: 14,
// 最大縮放級別（0-24）
maxZoom: 18,
// 最小縮放級別（0-24）
minZoom: 7,
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>