Leaflet学习文档-Marker标注点

前章知识点

（1）Leaflet学习文档-初识
（2）Leaflet学习文档-加载底图
（3）Leaflet学习文档-Map使用说明

---

---

前言

Leaflet 中的 Marker（标记） 是用于在地图上标注特定位置的组件，通常以图标形式显示。

---

一、Marker使用

主要阐述在Leaflet里面的Marker使用规则和一些简单说明。

1. Marker类

Marker类参数说明

// 自定义图标
const customIcon = L.icon({
    iconUrl: '/images/icon.png',   // 图标图片路径
    iconSize: [38, 38],            // 图标大小（宽, 高）
    iconAnchor: [19, 38],          // 图标锚点（相对于左上角）
    popupAnchor: [0, -38]          // Popup 弹出位置偏移
});

// marker点设置
const marker = L.marker(
		[39.90002, 116.46], 
		{ 
			// marker点图标
			icon: customIcon,
			// 表示标记是否可以通过键盘访问并使用回车键点击
			keyboard: true,
			// 当鼠标悬停在标记上时显示的浏览器提示文本,基本不使用
			title: '',
			// 用于图标图像的 alt 属性，有助于提高可访问性，基本不使用
			alt: '',
			// 默认情况下，标记图片的叠置顺序由纬度自动设置。此选项允许你调整特定标记的叠置顺序
			zIndexOffset: 0,
			// 控制图标信息，范围从 0 到 1,定义标记的不透明度
			opacity: 1,
			// 则当鼠标悬停在标记上时，它将显示在其他标记之上
			riseOnHover: false,
			// 要素凸显时的高度补偿值，默认为 250
			riseOffset: 250,
			// 当拖拽标记到地图边缘时，是否平移地图以允许进一步拖拽。
			autoPan: false,
			// 定义当标记接近地图边缘多少像素时开始平移
			autoPanPadding: [50, 50]
		}
	).addTo(map);

2. Marker类说明

Marker作为某类点的点位标记，一般都是以图标的形式展示，marker点在地图容器里面承载，其基本原理是在地图容器div内部添加对应的img标签，再根据所需的经纬进行放置。

const marker = L.marker([39.90002, 116.46]).addTo(map);

Marker类的基础使用L.marker([纬度，经度]),addTo(地图对象),这样地图上会出现使用默认图标的标注。

Marker参数里面常用基本为icon属性，其他属性可以根据需求来使用（基本上很少使用，这边就不过多评述）。icon也是Leaflet上类，本文也会阐述Icon类的常规使用。

二、Icon使用

主要阐述在Leaflet里面的Icon使用规则和一些简单说明。

1. Icon类

Icon类参数说明

// 自定义图标
const customIcon = L.icon({
	// 图标图片路径，必填
    iconUrl: '/images/icon.png',   
    // 图标大小（宽, 高），必填
    iconSize: [38, 38],  
    // 图标锚点（相对于左上角），必填          
    iconAnchor: [19, 38],   
    // Popup 弹出位置偏移，必填       
    popupAnchor: [0, -38],
    // 可选          
    iconRetinaUrl: '/images/icon-2x.png', 
     // 可选
    shadowUrl: '/images/shadow.png',
    // 可选
    shadowRetinaUrl: '/images/shadow-2x.png', 
    // 可选
    shadowSize: [68, 95], 
     // 可选
    shadowAnchor: [22, 94],
    // 可选
    className: 'my-custom-class', 
    // 可选
    crossOrigin: true 
});

2. Icon类必填参数说明

Icon作为某类点的点位标记图标，一般都是依附于已经存在的地图要素而存在（如Marker点，面要素中心点等等）。

const customIcon = L.icon({
	// 图标图片路径，必填
    iconUrl: '/images/icon.png',   
    // 图标大小（宽, 高），必填
    iconSize: [38, 38],  
    // 图标锚点（相对于左上角），必填          
    iconAnchor: [19, 38],   
    // Popup 弹出位置偏移，必填       
    popupAnchor: [0, -38],
});

icon必填参数iconUrl,iconSize,iconAnchor,popupAnchor四个信息
iconUrl可以为png，jpg。gif等图片格式（可以根据需求来调整）
iconSize为调整图片显示在地图上的大小，图片会自适应所设置的大小（即图片会被拉伸变形）
iconAnchor为调整图片位置，主要对图标微调使其位置更符合需求
popupAnchor为调整弹出框的位置信息，主要对弹出框微调，避免弹出框遮住对应的图标等

3. Icon类可选参数说明

icon可选参数iconRetinaUrl,shadowUrl,shadowRetinaUrl,shadowSize,shadowAnchor,className,crossOrigin等信息
iconRetinaUrl提供用于屏幕设备的大尺寸版本图标图像的URL。如果未指定，则不会为高分辨率设备加载特殊图标
shadowUrl指定图标阴影图像的URL。如果不指定，将不会创建阴影图像
shadowRetinaUrl提供用于屏幕设备大尺寸版本的图标阴影图像的URL。如果不指定，将不会创建阴影图像
shadowSize为阴影部分的图片大小（与iconSize相同）
shadowAnchor为调整阴影坐标（与iconAnchor相同）
className分配给图标和阴影图像的自定义CSS类名称。默认为空字符串。使用此参数可以轻松地通过CSS进一步定制图标外观
crossOrigin是否跨域，避免图片无法请求到（若使用其他）

本篇幅主要阐述icon的基本使用方法，具体设置各位小伙伴可以自由尝试

// 添加自定义图标
    // 自定义图标
    const customIcon = L.icon({
      iconUrl: './images/icon.png',   // 图标图片路径
      iconSize: [38, 38],            // 图标大小（宽, 高）
      iconAnchor: [19, 38],          // 图标锚点（相对于左上角）
      popupAnchor: [0, -38]          // Popup 弹出位置偏移
    });

    // marker点设置
    const customMarker = L.marker(
      [39.8, 116.36],
      {
        // marker点图标
        icon: customIcon,
      }
    ).addTo(map);

    // 添加gif自定义图标
    const gifIcon = L.icon({
      iconUrl: './images/icon.gif',   // 图标图片路径
      iconSize: [38, 38],            // 图标大小（宽, 高）
      iconAnchor: [19, 38],          // 图标锚点（相对于左上角）
      popupAnchor: [0, -38]          // Popup 弹出位置偏移
    });

    // marker点设置
    const gifMarker = L.marker(
      [40.0, 116.36],
      {
        // marker点图标
        icon: gifIcon,
      }
    ).addTo(map);

可以看到默认图标底部会有阴影效果，而自定义如果没有设置阴影效果是不会存在阴影，但也不会影响其展示

---

三、DivIcon使用

Marker除了可以使用Icon,也可以使用本节的DivIcon进行标注，DivIcon更多的Html代码来实现对应的标注

1. DivIcon类

DivIcon类参数说明

const divIcon = L.divIcon({
	// 样式类，用于调整css
	className: 'my-div-icon',
	// 注记内容
	html: `<div>divIcon</div>`,
	// 背景位置，一般不设置
	bgPos: [0, 0]
});

2. DivIcon类参数说明

关键参数主要两个className, html参数
className主要为控制div的样式信息，若css功力好的小伙伴可以玩的比较开心
html会按照所写的html片段展示在Marker点上，可以复杂也可以简单（如本文就是简单的一个div标签）

// css样式
   .my-div-icon {
      width: 60px !important;
      height: 28px !important;
      border-radius: 4px;
      background-color: brown;
      font-size: 14px;
      font-weight: 400;
      color: white;
      text-align: center;
      line-height: 28px;
    }

const divIcon = L.divIcon({
 	// 样式类，用于调整css
   className: 'my-div-icon',
   // 注记内容
   html: `<div>divIcon</div>`,
   // 背景位置，一般不设置
   bgPos: [0, 0]
 });

 const divMarker = L.marker(
   [40.0, 116.56],
   {
     // marker点图标
     icon: divIcon,
   }
 ).addTo(map);

地图展示效果

总结

本文主要阐述Marker及其图标的设置

 1. Marker的使用
 2. Icon的使用
 3. DivIcon的使用

具体使用可以参考本文，若想深入可以按照示例进行开发