Leaflet

Leaflet 是一款开源的JavaScript地图库，适用于移动端的交互地图。JS库的大小仅38K，但包含了大部分开发者们所需的所有地图功能。Leaflet可以在所有主流的桌面和移动端平台上高效运行，支持多种插件扩展，并提供了简洁明了的API文档和易读的源代码。

示例代码

本节将截取Leaflet官网为开发者们提供的示例，完整示例请访问 https://leafletjs.com/。

在网页中加入OpenStreetMap，以及一个要素弹出框。

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <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();

使用Leaflet的基本步骤

一、引入JavaScript文件和CSS文件

在新建的HTML文件中的<script>标签中添加如下代码，即可引入Leaflet的JavaScript文件和CSS文件

 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
   integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
   crossorigin=""/>
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js"
   integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
   crossorigin=""></script>