Leaflet官方教程（二）——Leaflet on Mobile

Leaflet on Mobile

在这个例子中，你将学习到在移动设备中创建全屏地图，并且如何探测和使用用户当前位置。

Preparing the page

首先我们看一下html和CSS代码。为了让map div元素拉伸到整个屏幕，我们要用如下CSS代码。

body {

padding: 0;

margin: 0;

}

html, body, #map {

height: 100%;

width: 100vw;

}

我们也要告诉手机浏览器不需要的缩放比例以及通过如下代码设置恰当的大小和位置。

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

Initializing the map

利用下面代码初始化地图，展示世界地图：

var map = L.map(‘map’).fitWorld();

L.tileLayer(‘https://api.tiles.mapbox.com/v4/MapID/997/256/{z}/{x}/{y}.png?access_token={accessToken}’, {

attribution: ‘Map data &copy; <a href=”https://www.openstreetmap.org/”>OpenStreetMap</a> contributors,

    <a href=”https://creativecommons.org/licenses/by-sa/2.0/”>CC-BY-SA</a>, Imagery © <a href=”https://www.

    mapbox.com/”>Mapbox</a>‘,

maxZoom: 18

}).addTo(map);

Geolocation

Leaflet非常精简了缩放到需要位置的功能，locate方法设置setView选项代替常用setView方法：

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

这里我们指定缩放等级为16，一般默认就是16。当用户同意使用定位，地图就可以在浏览器中定位到用户当前位置。

至此我们已经完成手机地图全屏的工作，但是在定位完成后接下来我们要做些什么，下面是locationfound和

locationerror事件，我们以此为例在目的地添加marker，通过在locateAndSetView设置之前使用locationfound

监听事件来展示popup的精确度。

function onLocationFound(e) {

var radius = e.accuracy / 2;

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并且定位识别，它将返回世界地图的界面。

感悟：

目前感觉leaflet内置到android程序中比较麻烦，这里面介绍的是在手机浏览器中查看，很多时候

要在软件内部使用，我在实际项目中就有这个需求，有两个思路：一个是直接使用地图提供商的地图

如百度、mapbox，都提供android SDK，很方便。第二个思路就是用leaflet，但是目前我觉得leaflet

内置在软件内部很麻烦，特别是需要交互的问题，要用到js和android相互调用的问题。leaflet本质应

该是地图容器，而mapbox等就直接是地图，可以在leaflet中使用mapbox，所以一般内置地图，就直

接使用官方SDK会方便很多。

转载自：https://blog.csdn.net/u011435933/article/details/80489033