Leaflet 官方教程 Leaflet on Mobile 在移动端使用Leaflet

 写在前面的话

      Leaflet 是轻量的，开源的，代码结构简单上手快，网上插件很多，功能也很强，适合项目使用和学习。对于矢量数据Leflet采用Canvas/SVG技术路线进行渲染，如果需要在前端渲染更大量的矢量数据则可以切换到Mapbox或者Cesium。

      Leaflet 专门针对移动端做过优化，对移动端友好，例如，支持手势缩放等操作，能够通过移动端获取设备地理位置，并提供了快捷方法。这也是Leaflet的核心优势之一。我们来看看官方教程里面是怎么说的。以下为Leaflet官方教程内容。Let's go.

In this example, you’ll learn how to create a fullscreen map tuned for mobile devices like iPhone, iPad or Android phones, and how to easily detect and use the current user location.

        在这个示例中，你将学到如何创建一个全屏的地图来适配像苹果的iPhone,IPad或安卓设备等移动设备，以及很方便的检测和获取用户当前位置。

地图示例，需要翻墙，显示不了。

Preparing the page

页面准备

First we’ll take a look at the HTML & CSS code of the page. To make our map div element stretch to all available space (fullscreen), we can use the following CSS code (note: In this example we use percentage for height. While vh is arguably better, due to a bug with Google Chrome on mobile.):

        第一步我们先来看看页面的HTML和CSS代码。为了让地图所在div全屏，我们使用如下的CSS代码（注意：在这个示例中，页面高度使用百分比数值，本来用vh可能会更好，但是移动端的谷歌浏览器有bug。）：

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

Also, we need to tell the mobile browser to disable unwanted scaling of the page and set it to its actual size by placing the following line in the head section or our HTML page:

        同时，我们需要移动浏览器禁用页面缩放，使用实际尺寸，在页面的head块中加入如下代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Initializing the map

初始化地图

We’ll now initialize the map in the JavaScript code like we did in the quick start guide, showing the whole world:

        现在我们使用JavaScript代码来初始化地图，这个在之前的快速开始指南讲过了，显示整个世界。

var map = L.map('map').fitWorld();

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

 

Geolocation

地理位置

Leaflet has a very handy shortcut for zooming the map view to the detected location — locate method with the setView option, replacing the usual setView method in the code:

         Leaflet 提供了一个非常简洁的方法将地图定位到用户当前位置，-使用locate方法替代原来的setView方法，在调用locate方法时添加setView选项：

map.locate({setView: true, maxZoom: 16});

Here we specify 16 as the maximum zoom when setting the map view automatically. As soon as the user agrees to share its location and it’s detected by the browser, the map will set the view to it. Now we have a working fullscreen mobile map! But what if we need to do something after the geolocation completed? Here’s what the locationfound and locationerror events are for. Let’s for example add a marker in the detected location, showing accuracy in a popup, by adding an event listener to locationfound event before the locateAndSetView call:

        这里我们在设置地图范围时将地图的最大缩放级别设置为了16级。用户授权使用当前位置并且浏览器检测到当前位置后，地图就会将位置定位到用户当前所在位置。现在我们就有了一个可用的移动端全屏地图！如果想在获取当前位置结束时再做点什么，就要用到locationfound和locationerror消息了。举例来说，我们在获取到当前位置时，在当前位置添加一个marker，显示准确位置，需要在调用locate方法前添加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);

Excellent! But it would also be nice to show an error message if the geolocation failed:

太棒了！当监听到获取定位失败时提示错误消息也是必要的。

function onLocationError(e) {
    alert(e.message);
}

map.on('locationerror', onLocationError);

If you have setView option set to true and the geolocation failed, it will set the view to the whole world.

       如果前面的locate代码设置了setView选项为true，当获取定位失败时，则地图会定位到全世界范围。

Now the example is complete — try it on your mobile phone: View the full example →

         示例讲完了，在你的手机上访问试试吧：Mobile tutorial - Leaflet

Next steps would be to take a look at the detailed documentation and browse other examples.

         下一步可以浏览详细文档或者看看其他示例。