Accessible Map——访问地图

最新推荐文章于 2021-10-24 21:05:19 发布

桃李不言_下自成蹊

最新推荐文章于 2021-10-24 21:05:19 发布

阅读量420

点赞数

分类专栏： OpenLayers3

OpenLayers3 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

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 themap 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”，这使得它可以获得焦点。为了使map元素获得焦点，你可以使用“tab”键或者“skip link”（页面中有<a class="skiplink" href="#map">Go to map</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.

单击地图下面的“Zoom in”和“Zoom out”按钮可以来缩放地图，你可以使用“tab”键切换到这些按钮，然后按下“enter”键来触发缩放行为。

代码：

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol.js"></script>
    <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
    </style>
  </head>
  <body>
    <a class="skiplink" href="#map">Go to map</a>
    <div id="map" class="map" tabindex="0"></div>
    <button id="zoom-out">Zoom out</button>
    <button id="zoom-in">Zoom in</button>
    <script>
      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }),
        view: new ol.View({
          center: [0, 0],
          zoom: 2
        })
      });

      document.getElementById('zoom-out').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById('zoom-in').onclick = function() {
        var view = map.getView();
        var zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
    </script>
  </body>
</html>

桃李不言_下自成蹊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Accessible 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 themap
复制链接

扫一扫

专栏目录