Leaflet 移动端

在此示例中，您将学习如何创建针对 iPhone、iPad 或 Android 手机等移动设备进行调整的全屏地图，以及如何轻松检测和使用当前用户位置。

<iframe src=’Mobile tutorial – Leaflet (leafletjs.com)‘ width=’100%’ height=’360px’></iframe>

准备页面

首先我们来看看页面的 HTML & CSS 代码。为了使我们的地图 div 元素拉伸到所有可用空间（全屏），我们可以使用以下 CSS 代码（注意：在此示例中，我们使用百分比表示高度。虽然 vh 可以说更好，但由于移动设备上的 Google Chrome 存在错误。 ):

body {
    padding: 0;
    margin: 0;
}
html, body, #map {
    height: 100%;
    width: 100vw;
}

此外，我们需要告诉移动浏览器禁用不需要的页面缩放，并通过在 head 部分或我们的 HTML 页面中放置以下行来将其设置为实际大小：

<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://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

地理位置

Leaflet 有一个非常方便的快捷方式，可以将地图视图缩放到检测到的位置 – 使用 setView 选项定位方法，替换代码中通常的 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 并且地理定位失败，它会将视图设置为整个世界。