介绍
leaflet是一个开源的JavaScript地图库,十分的轻量级,官网介绍leaflet的包的大小不超过50kb,但是具有很好的兼容性和拓展性,拥有很多功能强大的插件,是一个非常好用的轻量级地图库
官网地址:leaflet
快速开始
这里使用一个官方的原生例子来作为快速入门的使用
var map=L.map('map').setView([51.505,-0.09],13)
L.tilelayer('https://tile.openstreesmap.org/{z}/{x}/{y}.png',{
attribution:'© <a href="http://www/openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5,-0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup .<br> Easily customizable .')
.openPopup();
注意哦,本文默认了你已经掌握了前端开发的基础知识,至少知道怎么引用在线的js包或者下载包到本地,并且导入到你的项目中去。
你肯定看出来了,上述的代码只是JavaScript的部分内容,那么在html结构里应该怎么写呢?其实很简单,只要创建一个div并将他的id定义为map就可以了
<body>
<div id="map"></div>
</body>
现在我们讲一下官方快速入门demo的几行代码
var map=L.map('map').setView([51.505,-0.09],13)
这里使用L(也就是leaflet导入的一个主要模块)的map创建了一个map对象,将其绑定到id为map的div上,然后设置map的显示的地点为[51.505,-0.09](是在欧洲一带),定义缩放级别为13(后面会讲)
L.tilelayer('https://tile.openstreesmap.org/{z}/{x}/{y}.png',{
attribution:'© <a href="http://www/openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
这里定义了一个tileLayer,也就是切片地图。向其中传入了两个参数,分别是切片地图的地址,以及options(选项),在本例中options包含了一个attribution,这是定义了一个logo信息,会显示openstreet的logo和链接,不想要可以去掉。最后使用addTo(map)将该切片图层添加到上面创建好的map对象中。
L.marker([51.5,-0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup .<br> Easily customizable .')
.openPopup();
这里主要是创建了一个Marker(也就是标记),位置是在[51.5,-0.09],并且为该marker绑定了一个popup(弹出框)
效果展示
最后贴出一段完整代码和效果截图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<title>quickStart</title>
</head>
<body>
<div id="map" style="height: 600px;"></div>
<script>
var map = L.map('map').setView([51.505, -0.09], 13)
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attrubution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
</script>
</body>
</html>
结语
本文主要介绍了一下leaflet这个第三方库,以及讲解了leaflet的官方快速入门实例。在官方文档中还有很多api和plugin,本人也是在学习的过程中,如有不正确的地方,欢迎指出。