新增控制器
此範例示範如何加入地圖控制器，包含以下功能：
- 建立多種控制器並指定位置：建立
DrawControl（繪圖控制器）、NavigationControl（導覽控制器）、FullscreenControl（全螢幕控制器）、AttributionControl（地圖資訊控制器），並透過map.addControl()將控制器設置到不同位置
warning
在添加控制器時，須注意部分控制器會有互相衝突的狀況，詳情請參考「互相衝突的控制器」區塊。
<!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">
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.53559860212545, 25.029308142529132], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 14, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
/* ══════════════════════════════════════════════════════════════════════════
* 建立多種控制器並指定位置：
- 可調整 AttributionControl 的 compact，收合地圖資訊。
- 可調整 AttributionControl 的 customAttribution，更改附加的文字資訊。
- 可調整 addControl() 中的參數，更改欲新增的控制器及位置。
══════════════════════════════════════════════════════════════════════════ */
map.on("style.load", () => {
// 繪圖控制器
const draw = new mapPlus.DrawControl();
// 導覽控制器
const navigation = new mapPlus.NavigationControl();
// 全螢幕控制器
const fullscreen = new mapPlus.FullscreenControl();
// 地圖資訊控制器
const attribution = new mapPlus.AttributionControl({
// 是否有收合功能
compact: true,
// 自定義文字的附加資訊
customAttribution: "歡迎使用 mapPlus !",
});
// 控制器的位置可設定：'top-left'、'top-right'、'bottom-left'、'bottom-right'
map.addControl(draw, "top-left");
map.addControl(navigation, "top-right");
map.addControl(fullscreen, "bottom-right");
map.addControl(attribution, "bottom-left");
});
</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.53559860212545, 25.029308142529132], // 地圖中心點
pitch: 0, // 視角傾斜角度, 0~85
bearing: 0, // 視角旋轉角度, 0~360
zoom: 14, // 縮放級別
maxZoom: 18, // 最大縮放級別
minZoom: 7, // 最小縮放級別
});
/* ══════════════════════════════════════════════════════════════════════════
* 建立多種控制器並指定位置：
- 可調整 AttributionControl 的 compact，收合地圖資訊。
- 可調整 AttributionControl 的 customAttribution，更改附加的文字資訊。
- 可調整 addControl() 中的參數，更改欲新增的控制器及位置。
══════════════════════════════════════════════════════════════════════════ */
map.on("style.load", () => {
// 繪圖控制器
const draw = new mapPlus.DrawControl();
// 導覽控制器
const navigation = new mapPlus.NavigationControl();
// 全螢幕控制器
const fullscreen = new mapPlus.FullscreenControl();
// 地圖資訊控制器
const attribution = new mapPlus.AttributionControl({
// 是否有收合功能
compact: true,
// 自定義文字的附加資訊
customAttribution: "歡迎使用 mapPlus !",
});
// 控制器的位置可設定：'top-left'、'top-right'、'bottom-left'、'bottom-right'
map.addControl(draw, "top-left");
map.addControl(navigation, "top-right");
map.addControl(fullscreen, "bottom-right");
map.addControl(attribution, "bottom-left");
});
</script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100vw; height: 100vh; }
</style>