【Leaflet入门篇】 Leaflet快速入门

【Leaflet入门篇】 Leaflet快速入门

前言

Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有 42 KB of JS, 并且拥有绝大部分开发者所需要的所有地图特性 。
Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的 扩展插件、 优秀的文档（相对于openlayer，Leaflet有一个非常友好的中文网站 ）、简单易用的 API 和完善的案例, 以及可读性较好的 源码 。
一个优秀的文档对初学者的帮助是巨大的，接下来的内容都是基于这个文档来的（强烈推荐大家看官方文档 https://leafletjs.cn/）
image.png

【Leaflet入门篇】文章可以帮助大家能够更好的阅读教程文档
“快速入门”主要讲Leaflet的引入和使用（添加简单的地图元素和点击事件），对应教程【Leaflet快速入门指南】

1 引入
引入分为脚本引入(script)和模块引入(import)等
脚本引入

注：先引leaflet.css，在引leaflet.js 模块引入

// 直接安装
npm install --save [email protected] (版本号自己顶，此刻最新版本v1.9.4)

// package.json 添加安装
“dependencies”: {
“leaflet”: “^1.7.1”
}
npm install

// 引入
import L from ‘leaflet’
import ‘leaflet/dist/leaflet.css’

2 使用
本文将使用分为以下三步：

2.1 创建具有特定id的div元素