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 © <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的内容会在后文中继续介绍。
在线预览
手机阅读
赞赏支持
手机阅读

微信打赏

支付宝打赏
声明
1.本文所分享的所有需要用户下载使用的内容(包括但不限于软件、数据、图片)来自于网络或者麻辣GIS粉丝自行分享,版权归该下载资源的合法拥有者所有,如有侵权请第一时间联系本站删除。
2.下载内容仅限个人学习使用,请切勿用作商用等其他用途,否则后果自负。
3.如果本文对您有所帮助,请您对我们团队进行 打赏捐助,让我们在传播3S的路上可以走得更远,不胜感激。PS:如果你是学生党,请优先把经费用于购买学习资料 以及 与小哥哥/小姐姐约会上:-)
为什么浏览器中显示不了地图?
F12一下看看有没有报错?
解决啦 谢谢啦
怎么解决的?
并不能返回json数据啊