1、初始化
L.map(<String> id , options ?) //用地图div的id创建
L.map(<HTMLElement>el , options?) //用地图div的name创建
// 简单示例
// initialize the map on the "map" div with a given center and zoom
var map = L.map('map', {
center: [51.505, -0.09],
zoom: 13
});
2、参数
a.控件选项
选择 | 类型 | 默认 | 描述 |
attributionControl | Boolean | true | 地图右下角的信息说明控件。 |
zoomControl | Boolean | true | 左上角的缩放控件。 |
b.交互选项
选择 | 类型 | 默认 | 描述 |
closePopupOnClick | Boolean | true | 如果点击(click)地图时不想Popup被关闭，把该参数设置为false |
boxZoom | Boolean | true | 地图是否可以缩放到由指定的矩形区域，这个区域是你按住SHIFT同时拖动鼠标在地图上画的一个矩形区域 |
doubleClickZoom | Boolean|String | true | 是否允许双击鼠标进行放大，按住SHIFT双击鼠标缩小,默认true；如果将该参数值设置为'center'，则缩放时会固定以view的中心为中心进行缩放，不随鼠标的位置变化而变化 |
dragging | Boolean | true | 地图是否可通过鼠标/触摸拖动。 |
zoomSnap | Number | 1 | 强制地图的缩放后地图等级始终为这个参数的倍数，对fitBounds()方法作用很大 |
zoomDelta | Number | 1 | 每次缩放的倍数。 |
trackResize | Boolean | true | 地图是否自动处理浏览器窗口大小调整以自行更新。 |
c.平移惯性选项
选择 | 类型 | 默认 | 描述 |
inertia | Boolean | * | 如果启用，地图平移将产生惯性效应，其中 地图在拖动时建立动力并继续移动 一段时间内方向相同。触感特别好 设备。默认启用。 |
inertiaDeceleration | Number | 3000 | 惯性运动减慢的速率，以像素/秒²为单位。 |
inertiaMaxSpeed | Number | Infinity | 惯性运动的最大速度，以像素/秒为单位。 |
easeLinearity | Number | 0.2 | |
worldCopyJump | Boolean | false | 启用此选项后，当您平移到另一个“副本”时，地图将进行追踪 并无缝跳转到原始世界，以便所有叠加 像标记和矢量层仍然可见。 |
maxBoundsViscosity | Number | 0.0 | 如果设置，此选项将控制边界的实心 在拖动地图时。默认值允许 用户以正常速度拖动到边界外，较高的值将 减慢地图拖出边界的速度，并完全设置边界 实心，防止用户拖到边界之外。 |
d.键盘导航选项
选择 | 类型 | 默认 | 描述 |
keyboard | Boolean | true | 使用+``-和上下左右箭头对地图进行控制 |
keyboardPanDelta | Number | 80 | 按箭头键时要平移的像素量。 |
e.鼠标滚轮选项
选择 | 类型 | 默认 | 描述 |
scrollWheelZoom | Boolean|String | true | 是否可以使用鼠标滚轮缩放地图 |
wheelDebounceTime | Number | 40 | 限制车轮可以点火的速率（以毫秒为单位）。默认情况下用户通过滚轮缩放的频率不能超过每 40 毫秒一次。 |
wheelPxPerZoomLevel | Number | 60 | 滚动多少像素，表示更改一个完整的缩放级别。较小的值将使滚轮缩放更快（反之亦然）。 |
f.触摸交互选项
选择 | 类型 | 默认 | 描述 |
tapHold | Boolean | 启用事件模拟。 | |
tapTolerance | Number | 15 | 用户在触摸过程中可以移动手指的最大像素数。 |
touchZoom | Boolean|String | * | 是否可以通过用两根手指触摸拖动来缩放地图。 |
bounceAtZoomLimits | Boolean | true | 如果不希望地图缩放到超过最小/最大缩放，请将其设置为 false，然后在缩放时反弹回去。 |
g.地图状态选项
选择 | 类型 | 默认 | 描述 |
crs | CRS | L.CRS.EPSG3857 | 要使用的坐标参考系 |
h.动画选项
选择 | 类型 | 默认 | 描述 |
zoomAnimation | Boolean | true | 是否启用地图缩放动画。默认情况下，它处于启用状态 在除 Android 之外的所有支持 CSS3 过渡的浏览器中。 |
zoomAnimationThreshold | Number | 4 | 如果缩放差异超过此值，则不会对缩放进行动画处理。 |
fadeAnimation | Boolean | true | 是否启用磁贴淡入淡出动画。默认情况下，它处于启用状态 在除 Android 之外的所有支持 CSS3 过渡的浏览器中。 |
markerZoomAnimation | Boolean | true | 标记是否使用缩放动画对其缩放进行动画处理（如果禁用） 它们将在动画的长度内消失。默认情况下，它是 在除 Android 之外的所有支持 CSS3 过渡的浏览器中启用。 |
transform3DLimit | Number | 2^23 | 定义 CSS 转换转换的最大大小。默认 除非 Web 浏览器将图层放置在 做大事后错了地方.panBy |
3、事件
a.图层事件
事件 | 数据 | 描述 |
baselayerchange | LayersControlEvent | 当通过层控件更改基础层时触发。 |
overlayadd | LayersControlEvent | 通过图层控件选择叠加时触发。 |
overlayremove | LayersControlEvent | 通过图层控件取消选择叠加时触发。 |
layeradd | LayerEvent | 将新图层添加到地图时触发。 |
layerremove | LayerEvent | 从地图中移除某些图层时触发 |
b.地图状态变化事件
事件 | 数据 | 描述 |
zoomlevelschange | Event | 当地图上的缩放级别数因更改而触发 以添加或删除图层。 |
resize | ResizeEvent | 调整地图大小时触发。 |
unload | Event | 使用删除方法销毁地图时触发。 |
viewreset | Event | 当地图需要重绘其内容时触发（这通常会发生） 在地图上缩放或加载）。对于创建自定义叠加非常有用。 |
load | Event | 初始化地图时触发（设置其中心和缩放比例时） 第一次）。 |
zoomstart | Event | 在地图缩放即将更改时触发（例如，在缩放动画之前）。 |
movestart | Event | 当地图视图开始更改时触发（例如，用户开始拖动地图）。 |
zoom | Event | 在变焦级别发生任何变化时反复触发， 包括缩放和飞行动画。 |
move | Event | 在地图的任何移动过程中反复发射， 包括平移和飞行动画。 |
zoomend | Event | 在任何动画之后，地图缩放更改时触发。 |
moveend | Event | 当地图中心停止更改时触发 （例如，用户停止拖动地图或在非居中缩放后）。 |
c.弹出式事件
事件 | 数据 | 描述 |
popupopen | PopupEvent | 在地图上打开弹出窗口时触发 |
popupclose | PopupEvent | 关闭地图中的弹出窗口时触发 |
autopanstart | Event | 打开弹出窗口时地图开始自动平移时触发。 |
d.工具提示事件
事件 | 数据 | 描述 |
tooltipopen | TooltipEvent | 在地图中打开工具提示时触发。 |
tooltipclose | TooltipEvent | 关闭地图中的工具提示时触发。 |
e.位置事件
事件 | 数据 | 描述 |
locationerror | ErrorEvent | 在地理位置（使用定位方法）失败时触发。 |
locationfound | LocationEvent | 在地理位置定位时触发（使用定位方法） 成功了。 |
f.交互事件
事件 | 数据 | 描述 |
click | MouseEvent | 当用户单击（或点击）地图时触发。 |
dblclick | MouseEvent | 当用户双击（或双击）地图时触发。 |
mousedown | MouseEvent | 当用户在地图上按下鼠标按钮时触发。 |
mouseup | MouseEvent | 当用户在地图上释放鼠标按钮时触发。 |
mouseover | MouseEvent | 鼠标进入地图时触发。 |
mouseout | MouseEvent | 鼠标离开地图时触发。 |
mousemove | MouseEvent | 当鼠标在地图上移动时触发。 |
contextmenu | MouseEvent | 当用户在地图上按下鼠标右键时触发，阻止 默认浏览器上下文菜单显示是否有侦听器 此事件。当用户按住单次触摸时，也会在移动设备上触发 一秒钟（也称为长按）。 |
keypress | KeyboardEvent | 当用户按下键盘上的键时触发，该键在聚焦地图时生成字符值。 |
keydown | KeyboardEvent | 当用户在聚焦地图时从键盘按键时触发。与事件不同的是， 为生成字符值的键和键触发事件 不生成字符值。keypress``keydown |
keyup | KeyboardEvent | 当用户在聚焦地图时从键盘松开键时触发。 |
preclick | MouseEvent | 在鼠标单击地图之前触发（有时在 希望在任何现有点击之前在点击时发生一些事情 处理程序开始运行）。 |
g.其他
事件 | 数据 | 描述 |
zoomanim | ZoomAnimEvent | 每个缩放动画至少触发一次。对于连续变焦，如捏合变焦，在变焦期间每帧触发一次。 |
4、方法
方法 | 返回 | 描述 |
getRenderer(layer) | Renderer | 返回应该用于呈现给定路径的渲染器实例。它将确保地图和路径的选项 得到尊重，并且渲染器确实存在于地图上。renderer |
a.图层和控件的方法
方法 | 返回 | 描述 |
addControl(control) | this | 将给定控件添加到映射 |
removeControl(control) | this | 从映射中删除给定的控件 |
addLayer(layer) | this | 将给定图层添加到地图 |
removeLayer(layer) | this | 从地图中移除给定图层。 |
hasLayer(layer) | Boolean | 如果给定图层当前已添加到地图中，则返回true |
eachLayer(fn, context?) | this | 循环访问地图的层，可以选择指定迭代器函数的上下文。map.eachLayer(function(layer){ layer.bindPopup('Hello'); }); |
openPopup(popup) | this | 在关闭之前打开的弹出窗口的同时打开指定的弹出窗口（以确保一次只打开一个弹出窗口以提高可用性）。 |
openPopup(<String|HTMLElement> content, latlng, options?) | this | 创建具有指定内容和选项的弹出窗口，并在地图上的给定点中将其打开。 |
closePopup(popup?) | this | 关闭以前使用 openPopup 打开的弹出窗口（或给定弹出窗口）。 |
openTooltip(tooltip) | this | 打开指定的工具提示。 |
openTooltip(<String|HTMLElement> content, latlng, options?) | this | 创建具有指定内容和选项的工具提示并将其打开。 |
closeTooltip(tooltip) | this | 关闭作为参数给出的工具提示。 |
b.修改地图状态的方法
方法 | 返回 | 描述 |
setView(center, zoom, <Zoom/pan options> options?) | this | 使用给定的设置地图视图（地理中心和缩放） 动画选项。 |
setZoom(zoom, <Zoom/pan options> options?) | this | 设置地图的缩放比例。 |
zoomIn(delta?, options?) | this | 将地图的缩放比例增加（默认情况下为缩放增量）。delta |
zoomOut(delta?, options?) | this | 将地图的缩放比例减小（默认情况下为缩放增量）。delta |
setZoomAround(latlng, zoom, options) | this | 缩放地图，同时在地图上保留指定的地理点 静止（例如，内部用于滚动缩放和双击缩放）。 |
setZoomAround(offset, zoom, options) | this | 缩放地图，同时保持地图上的指定像素（相对于左上角）不变。 |
fitBounds(bounds, options?) | this | 设置包含给定地理边界的地图视图，其中 最大缩放级别可能。 |
fitWorld(options?) | this | 设置一个地图视图，该视图主要包含整个世界，最大值 缩放级别可能。 |
panTo(latlng, options?) | this | 将地图平移到给定中心。 |
panBy(offset, options?) | this | 按给定数量的像素平移地图（动画）。 |
flyTo(latlng, zoom?, <Zoom/pan options> options?) | this | 设置地图视图（地理中心和缩放）执行平滑 平移缩放动画。 |
flyToBounds(bounds, options?) | this | 使用平滑的动画（如 flyTo）设置地图视图， 但采用边界参数，如 fitBounds。 |
setMaxBounds(bounds) | this | 将地图视图限制为给定边界。 |
setMinZoom(zoom) | this | 设置可用缩放级别的下限。 |
setMaxZoom(zoom) | this | 设置可用缩放级别的上限。 |
panInsideBounds(bounds, options?) | this | 将地图平移到位于给定边界内的最近视图（如果尚未平移），并使用特定选项（如果有）控制动画。 |
panInside(latlng, options?) | this | 将地图平移为最小量以使其可见。用 填充选项，使显示适合更受限制的边界。 如果已在（可选填充）显示边界内， 不会平移地图。latlng``latlng |
invalidateSize(<Zoom/pan options> options) | this | 检查地图容器大小是否更改，如果是，则更新地图 — 在动态更改地图大小后调用它，同时进行动画处理 默认平移。 |
invalidateSize(animate) | this | 检查地图容器大小是否更改，如果是，则更新地图 — 在动态更改地图大小后调用它，同时进行动画处理 默认平移。 |
stop() | this | 停止当前正在运行的动画或动画（如果有 |
c.地理定位方法
方法 | 返回 | 描述 |
locate(options?) | this | 尝试使用地理位置 API 定位用户，在成功时触发包含位置数据的位置找到事件，或在失败时触发位置错误`事件。 |
stopLocate() | this | 停止监视先前由 启动的位置，如果 使用 调用了 map.locate ，则中止重置地图视图。 |
d.其他方法
方法 | 返回 | 描述 |
addHandler(name, HandlerClass) | this | 将新的处理程序添加到映射中，给定其名称和构造函数。 |
remove() | this | 销毁映射并清除所有相关的事件侦听器。 |
createPane(name, container?) | HTMLElement | 使用给定名称创建新的地图窗格（如果尚不存在）， 然后返回它。窗格创建为 、 或 的子项 作为主地图窗格的子项（如果未设置）。container |
getPane(<String|HTMLElement> pane) | HTMLElement | 返回给定其名称或 HTML 元素（其标识）的地图窗格。 |
getPanes() | Object | 返回一个纯对象，其中包含所有窗格的名称作为键和 窗格作为值。 |
getContainer() | HTMLElement | 返回包含映射的 HTML 元素。 |
whenReady(fn, context?) | this | 在映射初始化时运行给定函数 视图（居中和缩放）和至少一个图层，或立即 如果已初始化，可以选择传递函数上下文。fn |
e.获取地图状态的方法
方法 | 返回 | 描述 |
getCenter() | LatLng | 返回地图视图的地理中心 |
getZoom() | Number | 返回地图视图的当前缩放级别 |
getBounds() | LatLngBounds | 返回当前地图视图中可见的地理边界 |
getMinZoom() | Number | 返回地图的最小缩放级别（如果在地图或任何图层的选项中设置）或默认缩放级别。 |
getMaxZoom() | Number | 返回地图的最大缩放级别（如果在地图或任何图层的选项中设置）。 |
getBoundsZoom(bounds, inside?, padding?) | Number | 返回给定边界适合地图的最大缩放级别。 |
getSize() | Point | 返回地图容器的当前大小（以像素为单位）。 |
getPixelBounds() | Bounds | 以投影像素为单位返回当前地图视图的边界 坐标（有时在层和覆盖实现中很有用）。 |
getPixelOrigin() | Point | 返回 的左上角的投影像素坐标 地图图层（在自定义图层和叠加实现中很有用）。 |
getPixelWorldBounds(zoom?) | Bounds | 返回缩放级别的像素坐标中的世界边界。 |
f.转换方法
方法 | 返回 | 描述 |
getZoomScale(toZoom, fromZoom) | Number | 返回要应用于从缩放级别到 的地图过渡的比例因子。 |
getScaleZoom(scale, fromZoom) | Number | 返回地图最终将达到的缩放级别（如果它处于级别并且所有内容都按 的因子缩放）。 |
project(latlng, zoom) | Point | 根据投影投影地理坐标 LatLng 的 CRS，然后根据zoom 和 CRS 的变换对其进行缩放。 |
unproject(point, zoom) | LatLng | 反转。 |
layerPointToLatLng(point) | LatLng | 给定相对于原点像素的像素坐标， 返回相应的地理坐标（对于当前缩放级别）。 |
latLngToLayerPoint(latlng) | Point | 给定地理坐标，返回相应的像素坐标 相对于原点像素。 |
wrapLatLng(latlng) | LatLng | 返回一个 LatLng，其中 并且已根据 地图的 CRS 和属性（如果它们在 CRS的界限。 |
wrapLatLngBounds(bounds) | LatLngBounds | 返回与给定大小相同的 LatLngBounds，确保 它的中心在CRS的范围内。 |
distance(latlng1, latlng2) | Number | 根据以下条件返回两个地理坐标之间的距离地图的 CRS。默认情况下，这以米为单位测量距离。 |
containerPointToLayerPoint(point) | Point | 给定相对于地图容器的像素坐标，返回相应的相对于原点像素的像素坐标。 |
layerPointToContainerPoint(point) | Point | 给定相对于原点像素的像素坐标， 返回相对于地图容器的相应像素坐标。 |
containerPointToLatLng(point) | LatLng | 给定相对于地图容器的像素坐标，返回 相应的地理坐标（对于当前缩放级别）。 |
latLngToContainerPoint(latlng) | Point | 给定地理坐标，返回相应的像素坐标 相对于地图容器。 |
mouseEventToContainerPoint(ev) | Point | 给定一个 MouseEvent 对象，返回相对于 映射事件发生的容器。 |
mouseEventToLayerPoint(ev) | Point | 给定一个 MouseEvent 对象，返回相对于 事件发生的原始像素。 |
mouseEventToLatLng(ev) | LatLng | 给定一个 MouseEvent 对象，返回地理坐标，其中 活动发生了。 |
5、地图窗格
窗格是用于控制地图上图层顺序的 DOM 元素。你 可以使用 map.getPane 或 map.getPanes 方法访问窗格。可以使用 map.createPane 方法创建新窗格。
每个地图都有以下默认窗格，这些窗格仅在 zIndex 中有所不同。
窗 格 | 类型 | Z 指数 | 描述 |
mapPane | HTMLElement | 'auto' | 包含所有其他地图窗格的窗格 |
tilePane | HTMLElement | 200 | 网格图层和图块图层的窗格 |
overlayPane | HTMLElement | 400 | 矢量窗格（路径s，如折线s 和多边形）、图像叠加 s 和视频叠加 |
shadowPane | HTMLElement | 500 | 用于叠加阴影的窗格（例如标记阴影） |
markerPane | HTMLElement | 600 | 标记s 的图标s 的窗格 |
tooltipPane | HTMLElement | 650 | 工具提示的窗格。 |
popupPane | HTMLElement | 700 | 弹出窗口的窗格。 |
箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。
