简介

纯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