Accessible Map——访问地图
来源:互联网 发布:mysql数据库书籍 编辑:程序博客网 时间:2024/06/10 22:36
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>
- Accessible Map——访问地图
- OpenLayers3-1-Accessible Map
- Cocos2dx——瓦片地图(Tiled Map)
- Android——map(百度地图)
- Map Export——地图导出
- Map Graticule——地图坐标网
- google—MAP动态加载地图
- 5、Power Map—实例:填充地图
- 10、Power Map—自定义地图背景
- Map篇———动态地图坐标的实现
- CSS Image Map —— CSS图片地图
- little bug 1 —— STL map 的元素访问
- map访问
- ArcGIS For JavaScript API Show map properties(显示地图信息)————(十二)
- 【Bing Map学习系列】(2)——如何通过Bing Maps Silverlight Control显示地图
- 【Bing Map学习系列】(3)——如何通过Bing Maps Silverlight Control控制地图
- 【Bing Map学习系列】(4)——如何在自己的页面嵌入Silverlight地图
- 【Bing Map学习系列】(5)——如何使用图钉层和地图层
- android html5点击输入框页面变大
- Codeforces Gym 101142 K. King's Heir
- 欢迎使用CSDN-markdown编辑器
- android Spannable修改text颜色
- 线段树
- Accessible Map——访问地图
- 前端调试必备技巧(控制台使用完全指南)
- POJ1860---Currency Exchange (最短路:验证是否存在正环)
- prevent deception,舞步学院教你预防爱情网骗
- Eclipse快捷键 10个最有用的快捷键
- 左边下拉框点击后选项移动到右边下拉框
- mysql错误:Illegal mix of collations (latin1_swedish_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE)
- 英语——长难句分析及技巧
- smarty模板使用详细教程