Leaflet 自定义修改Marker点标记样式

点标记基本用法使用示例：

默认样式如图

实际项目中需要修改点标记的样式，如果仅仅需要更换图标，则可以使用Icon，使用示例如下：

var myIcon = L.icon({
	iconUrl: 'my‐icon.png',
	iconSize: [38, 95],
	iconAnchor: [22, 94],
	popupAnchor: [‐3, ‐76],
	shadowUrl: 'my‐icon‐shadow.png',
	shadowSize: [68, 95],
	shadowAnchor: [22, 94]
});
L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
           

参数解释如下：

参数	参数类型	默认值	说明
iconUrl	String	null	（必需）icon图标图像的URL（绝对或相对于您的脚本路径）
iconRetinaUrl	String	null	用于Retina屏幕设备大尺寸版本的图标图像的URL（绝对或相对于您的脚本路径）
iconSize	Point	null	icon图片的大小（单位：像素）
iconAnchor	Point	null	图标的“指示地理位置的锚点”的坐标（相对于其左上角）。 以便图标显示准确位于标记的地理位置。 如果指定大小，则iconAnchor默认为图标中心点，也可以在带有负边距的CSS中设置
popupAnchor	Point	null	popup弹窗相对于图标的锚点“打开”的点的坐标
shadowUrl	String	null	图标阴影图像的URL。 如果未指定，将不会创建阴影图像
shadowRetinaUrl	String	null	用于Retina屏幕设备大尺寸版本的图标图像阴影图像的URL。 如果未指定，将不会创建阴影图像
shadowSize	Point	null	阴影部分的图片大小（单位：像素）
shadowAnchor	Point	null	阴影（相对于其左上角）的“提示”的坐标（与未指定的iconAnchor相同）
className	String	‘’	要分配给图标和阴影图像的自定义css类名称。 默认为空

如果需要显示文字信息，则需要用DivIcon，因为div内容部分可以自由控制，支持自定义HTML代码放在div元素中，可以用DivIcon创建任意你能够想到的marker标记。

let htmlStr = '<p><span class="map-circle-name">' + point.name +
            '</span><br><span class="map-circle-count">' + point.count + '</span><p/>'
let icon = L.divIcon({
  html: htmlStr,
  iconSize: [80, 80],
  className: 'map-circle'
})
L.marker([50.5, 30.5], {icon: icon}).addTo(map)
           

实现效果如图

以上就是Leaflet中Marker点标记样式修改的方法，更多请参考官方文档。