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點标記樣式修改的方法，更多請參考官方文檔。