Accessible Map-可通路的地圖
知識要點
- （主要）在map元素上初始化地圖後，預設情況下，map元素是無法被聚焦的，我們可以設定map元素的tabindex屬性為“0”，這樣就能聚焦了。
- （主要）完成以上設定後，需要選中map元素才能對地圖進行預設操作，如：滾輪放大縮小，鍵盤平移等。
官網原文及譯文
This page’s map element has its tabindex attribute set to “0”, that makes it focusable. To focus the map element you can either navigate to it using the “tab” key or use the skip link. When the map element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
将頁面的map元素的tabindex屬性設定為“0”，使得它可以聚焦（focus）。想要聚焦map元素，您可以使用“tab”鍵導航到它，也可以使用a标簽跳轉。當map元素被聚焦時，可以使用+和-鍵來放大和縮小地圖，可以使用方向鍵來平移地圖。
Clicking on the “Zoom in” and “Zoom out” buttons below the map zooms the map in and out. You can navigate to the buttons using the “tab” key, and press the “enter” key to trigger the zooming action.
點選地圖下方的“放大”和“縮小”按鈕，可以放大和縮小地圖。您可以使用“tab”鍵導航到按鈕，并按“enter”鍵觸發縮放動作。
源碼
<!DOCTYPE html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<!-- 引入OpenLayers CSS樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/css/ol.css"
type="text/css">
<!-- 引入OpenLayers JS庫 -->
<script src="https://cdn.jsdelivr.net/gh/openlayers/[email protected]/en/v6.13.0/build/ol.js"></script>
<!-- css代碼 -->
<style>
.map {
width: 100%;
height: 400px;
}
.btns {
padding: 10px;
display: flex;
justify-content: center;
}
#map:focus {
outline: #4A74A8 solid 0.15em;
}
</style>
<title>Accessible Map-可通路的地圖</title>
</head>
<body>
<!-- html代碼 -->
<div class="btns">
<a href="#map">跳轉到地圖</a>
</div>
<div id="map" class="map" tabindex="0"></div>
<div class="btns">
<button id="zoom-in">放大</button>
<button id="zoom-out">縮小</button>
</div>
<!-- script代碼 -->
<script>
// 初始化地圖
const map = new ol.Map({
// 設定圖層
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
],
// 設定綁定的頁面元素
target: 'map',
// 設定視圖
view: new ol.View({
center: [0, 0],
zoom: 2,
}),
});
// 為zoom-out綁定點選事件
document.getElementById('zoom-out').onclick = function () {
// 擷取視圖對象
const view = map.getView();
// 擷取目前縮放層級數
const zoom = view.getZoom();
// 設定視圖縮放層級數為目前層級數-1，即縮小1級
view.setZoom(zoom - 1);
};
// 為zoom-in綁定點選事件
document.getElementById('zoom-in').onclick = function () {
// 擷取視圖對象
const view = map.getView();
// 擷取目前縮放層級數
const zoom = view.getZoom();
// 設定視圖縮放層級數為目前層級數+1，即放大1級
view.setZoom(zoom + 1);
};
</script>
</body>
</html>
效果截圖
![DOM下元素 offset client scroll 相關屬性簡介[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)