Leaflet笔记(1)最简单的入门程序——显示地图

时间: 2017年02月20日分类: Leaflet学习笔记标签: Leaflet, Leaflet入门

您的位置：

麻辣GIS » GIS笔记» Leaflet学习笔记 » Leaflet笔记(1)最简单的入门程序——显示地图

本文实现Leaflet的最基本的功能，在web中加载地图。实现步骤如下:

1.引入Leaflet文件

在<head>中加入如下代码：

<link rel="stylesheet" href="./static/css/leaflet.css">
<script src="./static/js/leaflet.js"></script>

2.创建地图显示div

在<body>中加入如下代码：

<div id="map-container"></div>

需要给这个div外加一个样式

<style>
  #map-container {
    width: 600px;
    height: 400px;
  }
</style>

3.显示地图

在<script>中加入如下代码：

var m = L.map('map-container').setView([36.52,120.31], 7);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(m);

4.浏览器打开

效果如图：

说明

上述加载的是Mapobx的图层，关于MapBox的内容会在后文中继续介绍。

所有代码

leafletjs/note-1.html at master · sailor103/leafletjs

手机阅读

赞赏支持

手机阅读

微信打赏

支付宝打赏

没有上文

下一篇：Leaflet笔记(2)注册并使用MapBox

声明

1.本文所分享的所有需要用户下载使用的内容（包括但不限于软件、数据、图片）来自于网络或者麻辣GIS粉丝自行分享，版权归该下载资源的合法拥有者所有，如有侵权请第一时间联系本站删除。

2.下载内容仅限个人学习使用，请切勿用作商用等其他用途，否则后果自负。

3.如果本文对您有所帮助，请您对我们团队进行打赏捐助，让我们在传播3S的路上可以走得更远，不胜感激。PS:如果你是学生党，请优先把经费用于购买学习资料以及与小哥哥/小姐姐约会上:-)

如您有疑问，可在文末留言，或到麻辣GIS QQ群中提问。

QQ群(一)：291616564 加入QQ群

QQ群(二)：166408035 加入QQ群

QQ群(三)：627853279 加入QQ群

QQ群(四)：436386604 加入QQ群

QQ群(五)：606176554 加入QQ群

QQ群(六)：946178380 加入QQ群

QQ群(七)：861271808 加入QQ群

新疆互助群：910717627 加入QQ群

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

已有 5 条评论

1#
黑夜无痕free · 2017-08-23 09:49

为什么浏览器中显示不了地图？

回复