Leaflet笔记(12)移动端使用Leaflet展示全屏地图

本文目录
  • 正文

本文介绍移动端使用 Leaflet 显示一个全屏地图的方法。

PS: 其实也没什么高深的,具体来说就是CSS,与 Leaflet 关系不大。

CSS 代码

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

看出来没,这就是全屏。。。

添加meta

<head> 标签中添加下面的 meta 信息。

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

这是 HTML5 中规定页面初始化大小及是否可缩放。

最后显示个图

var m = L.map('map-container').fitWorld();
var tileAddress = 'https://api.mapbox.com/styles/v1/yqcim/';
tileAddress += 'cizh1ma3400ez2so5x1anhuzo/tiles/256/{z}/{x}/{y}';
tileAddress += '?access_token=pk.eyJ1IjoieXFjaW0iLCJhIjoiY2l6ZmhnZjEx';
tileAddress += 'MDBhajJ4cGxnNGN5MnhpdCJ9.pcZtdfk8mSFboCdwqkvW6g';

var attribution = 'Map data &copy; <a href="http://openstreetmap.org">';
attribution += 'OpenStreetMap</a> contributors, '
attribution += '<a href="http://creativecommons.org/licenses/by-sa/2.0/">';
attribution += 'CC-BY-SA</a>, ';
attribution += 'Imagery © <a href="http://mapbox.com">Mapbox</a>';

L.tileLayer(tileAddress, {
  maxZoom: 18,
  attribution: attribution,
  id: 'mapbox.streets'
}).addTo(m);

效果图

所有代码

leafletjs/mobile-0 at master · sailor103/leafletjs

如果本文对你有所帮助,欢迎对我们团队进行打赏捐助,让我们在传播3S的路上可以走得更远。
赞赏支持
微信捐助麻辣GIS 支付宝捐助麻辣GIS

麻辣GIS-Sailor
作者:
GIS爱好者,学GIS,更爱玩GIS。

如您有疑问,可在文末留言,也可在 麻辣GIS•小分队 搜索回答或发帖 ,还可以在QQ群中提问。

本站QQ群(一):291616564 麻辣GIS

本站QQ群(二):166408035 麻辣GIS(二)

本站QQ群(三):627853279 麻辣GIS(三)

微信公众号:malagis,扫描右边二维码直接关注。

发表评论