Leaflet 手机版
在本示例中，您将学习如何创建针对 iPhone、iPad 或 Android 手机等移动设备优化的全屏地图，以及如何轻松检测和使用当前用户位置。
| 查看此独立示例。 |
准备页面
首先，我们将看看页面的 HTML 和 CSS 代码。为了使我们的地图 div 元素扩展到所有可用空间（全屏），我们可以使用以下 CSS 代码（注意：在本示例中，我们使用百分比作为高度。虽然 vh 理论上更好，但由于 Google Chrome 在移动设备上的一个 bug）。
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100vw;
}
此外，我们需要告诉移动浏览器禁用不必要的页面缩放，并将其设置为实际大小，方法是在 HTML 页面的 head 部分放置以下行。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
初始化地图
我们现在将在 JavaScript 代码中初始化地图，就像我们在 快速入门指南 中所做的那样，显示整个世界。
var map = L.map('map').fitWorld();
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
}).addTo(map);地理定位
Leaflet 有一个非常方便的快捷方式，用于将地图视图缩放至检测到的位置 - 使用 setView 选项的 locate 方法，替换代码中通常的 setView 方法。
map.locate({setView: true, maxZoom: 16});
这里我们将 16 指定为自动设置地图视图时的最大缩放级别。一旦用户同意共享其位置，并且浏览器检测到其位置，地图将将其视图设置为该位置。现在我们拥有一个工作中的全屏移动地图！但是，如果我们需要在地理定位完成之后执行一些操作呢？这就是 locationfound 和 locationerror 事件的目的。例如，让我们在检测到的位置添加一个标记，并在弹出窗口中显示精度，方法是在 locateAndSetView 调用之前，向 locationfound 事件添加一个事件监听器。
function onLocationFound(e) {
var radius = e.accuracy;
L.marker(e.latlng).addTo(map)
.bindPopup("You are within " + radius + " meters from this point").openPopup();
L.circle(e.latlng, radius).addTo(map);
}
map.on('locationfound', onLocationFound);
太棒了！但如果地理定位失败，显示错误消息也会很好。
function onLocationError(e) {
alert(e.message);
}
map.on('locationerror', onLocationError);
如果您已将 setView 选项设置为 true，并且地理定位失败，它将把视图设置为整个世界。
现在示例已经完成 - 在您的手机上试一试：查看完整的示例 →