简介

纯 JavaScript, 在地图上进行操作 (坐标点, 路径, 曲线等) 的一个库, 只提供操作地图 API, 实际加载某个地图, 由开发者决定

创建地图对象

1) 页面创建 div, 设置 div 属性撑满整个屏幕, 设置 div 中 id 属性
2) 使用 leafletAPI 初始化地图对象

// mapDiv 为 id 名字,setView 参数 1: 地图中心坐标位置  参数 2: 地图加载级别(数字越大, 地图加载越近) 
const map = L.map('mapDiv').setView([33.6528734492,104.7626939500], 5)

3) 为地图加载瓦片图层

常用 API

tileLayer

作用: 在页面加载瓦片地图图片

  const corner1 = L.latLng(50.4838600000, 77.1125230000) // 地图左上角
  const corner2 = L.latLng(22.5557360000, 138.0866980000) // 地图右上角
  const bounds = L.latLngBounds(corner1, corner2) // 根据 2 个经纬度来确定一个矩形 
  const attr = 'Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 
  L.tileLayer(url, {
    maxZoom: 10, // 放大最大到 10
    minZoom: 1, // 缩小最小到 1
    bounds: bounds, // 将地图设置成一个矩形
    attribution: attr // 地图右下角放置一些授权信息
  }).addTo(map)
  map.setMaxBounds(bounds) // 设置经纬度范围, 鼠标拖动的时候, 不在设置范围内, 会进行回弹

marker

作用: 根据给定经纬度, 在地图上加载一个标记
1) 加载默认标记

// title: 鼠标移动到标记上, 会显示该信息 opacity: 设置标记透明度
// zIndexOffset: 设置标记重叠关系, 场景: 在标记上插入图片, 可设置该属性, 让标记在图片的上层
L.marker([39.9094390677,116.3699341216], {title: 'this is title', opacity: '0.8', zIndexOffset: 9999}).addTo(map)

2) 加载自定义 icon

popup

path

circle