地圖互動開關
此範例示範如何建立地圖互動控制面板，包含以下功能：
- 動態產生互動按鈕：初始化地圖後，依
interactionList建立各功能開關與提示文字，並透過map.onInteraction()/map.offInteraction()控制互動行為
<!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>
<!-- Bootstrap CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
#aside {
position: absolute;
top: 16px;
right: 16px;
width: fit-content;
height: fit-content;
z-index: 10;
}
</style>
</head>
<body>
<div id="map">
<aside
id="aside"
class="d-flex flex-row-reverse align-items-center gap-2 bg-white p-2 rounded-2 shadow"
>
<div class="ps-2 border-start border-secondary-subtle">
<img
src="https://kw3dmap.autoking.com.tw/kingway-logo.png"
alt="Kingway map"
width="32"
height="32"
/>
</div>
</aside>
</div>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key',
accessToken: 'get_your_token',
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
center: [121.5251052025908, 25.044282178792372],
pitch: 50,
bearing: 25,
zoom: 14,
maxZoom: 20,
minZoom: 8,
});
/* ══════════════════════════════════════════════════════════════════════════
* 動態產生互動按鈕
══════════════════════════════════════════════════════════════════════════ */
const interactionList = [
{
name: "scrollZoom",
tooltip: "縮放地圖功能",
icon: "bi-arrows-angle-expand"
},
{
name: "dragPan",
tooltip: "拖曳地圖功能",
icon: "bi-hand-index"
},
{
name: "doubleClickZoom",
tooltip: "使用雙擊進行地圖放大",
icon: "bi-mouse2"
},
{
name: "boxZoom",
tooltip: "使用鍵盤 shift 加滑鼠拖曳來選擇一個區域，然後進行放大至該區域的功能，是電腦裝置的交互功能",
icon: "bi-shift",
},
{
name: "keyboard",
tooltip: "鍵盤操作，提供電腦裝置的交互功能",
icon: "bi-keyboard"
},
{
name: "dragRotate",
tooltip: "使用滑鼠點選進行地圖旋轉，是電腦裝置的交互功能",
icon: "bi-arrow-repeat"
},
{
name: "touchZoomRotate",
tooltip: "手指點選進行地圖旋轉與縮放操作，是行動裝置的交互功能",
icon: "bi-phone"
},
];
const btnOnClick = ({ target }) => {
const { checked, value } = target;
checked ? map.onInteraction(value) : map.offInteraction(value);
};
const aside = document.getElementById("aside");
// 渲染按鈕
interactionList.forEach(({ name, tooltip, icon }) => {
const div = document.createElement("div");
aside.appendChild(div);
const input = document.createElement("input");
input.id = name;
input.name = name;
input.value = name;
input.type = "checkbox";
input.className = "btn-check";
input.autocomplete = "off";
input.checked = true;
input.addEventListener("change", btnOnClick);
div.appendChild(input);
const label = document.createElement("label");
label.className = "btn btn-outline-primary btn-sm";
label.htmlFor = name;
label.setAttribute("data-bs-toggle", "tooltip");
label.setAttribute("data-bs-placement", "bottom");
label.setAttribute("data-bs-title", name + "： " + tooltip);
div.appendChild(label);
const i = document.createElement("i");
i.className = "bi " + icon;
label.appendChild(i);
new bootstrap.Tooltip(label);
});
</script>
</body>
</html>
<script src="https://kw3dmap.localking.com.tw/openapi/loader/mapPlus-1.3.9.loader.js" crossorigin="anonymous" referrerpolicy="origin"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<script type="module">
const map = await new mapPlus(document.getElementById("map"), {
accessKey: 'get_your_key',
accessToken: 'get_your_token',
style: 'https://kw3dmap.localking.com.tw/openapi/map/kwmap.etxt',
center: [121.5251052025908, 25.044282178792372],
pitch: 50,
bearing: 25,
zoom: 14,
maxZoom: 20,
minZoom: 8,
});
/* ══════════════════════════════════════════════════════════════════════════
* 動態產生互動按鈕
══════════════════════════════════════════════════════════════════════════ */
const interactionList = [
{
name: "scrollZoom",
tooltip: "縮放地圖功能",
icon: "bi-arrows-angle-expand"
},
{
name: "dragPan",
tooltip: "拖曳地圖功能",
icon: "bi-hand-index"
},
{
name: "doubleClickZoom",
tooltip: "使用雙擊進行地圖放大",
icon: "bi-mouse2"
},
{
name: "boxZoom",
tooltip: "使用鍵盤 shift 加滑鼠拖曳來選擇一個區域，然後進行放大至該區域的功能，是電腦裝置的交互功能",
icon: "bi-shift",
},
{
name: "keyboard",
tooltip: "鍵盤操作，提供電腦裝置的交互功能",
icon: "bi-keyboard"
},
{
name: "dragRotate",
tooltip: "使用滑鼠點選進行地圖旋轉，是電腦裝置的交互功能",
icon: "bi-arrow-repeat"
},
{
name: "touchZoomRotate",
tooltip: "手指點選進行地圖旋轉與縮放操作，是行動裝置的交互功能",
icon: "bi-phone"
},
];
const btnOnClick = ({ target }) => {
const { checked, value } = target;
checked ? map.onInteraction(value) : map.offInteraction(value);
};
const aside = document.getElementById("aside");
// 渲染按鈕
interactionList.forEach(({ name, tooltip, icon }) => {
const div = document.createElement("div");
aside.appendChild(div);
const input = document.createElement("input");
input.id = name;
input.name = name;
input.value = name;
input.type = "checkbox";
input.className = "btn-check";
input.autocomplete = "off";
input.checked = true;
input.addEventListener("change", btnOnClick);
div.appendChild(input);
const label = document.createElement("label");
label.className = "btn btn-outline-primary btn-sm";
label.htmlFor = name;
label.setAttribute("data-bs-toggle", "tooltip");
label.setAttribute("data-bs-placement", "bottom");
label.setAttribute("data-bs-title", name + "： " + tooltip);
div.appendChild(label);
const i = document.createElement("i");
i.className = "bi " + icon;
label.appendChild(i);
new bootstrap.Tooltip(label);
});
</script>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
/>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
#aside {
position: absolute;
top: 16px;
right: 16px;
width: fit-content;
height: fit-content;
z-index: 10;
}
</style>