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

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

L.marker([50.5, 30.5]).addTo(map);
1

默认样式如图

实际项目中需要修改点标记的样式，如果仅仅需要更换图标，则可以使用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);
1
2
3
4
5
6
7
8
9
10

参数解释如下：

如果需要显示文字信息，则需要用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)
1
2
3
4
5
6
7
8

实现效果如图

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