如何修改leaflet的marker圖標

1.

從官網中查看對應文檔：https://leafletjs.com/

2.

3.

 

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [32, 52],    //  圖標的大小    【值1，值2】 為具體你自定義圖標的尺寸，比如我圖標尺寸是32×52，表示該圖標：寬度32像素，高度：52像素，那么值1:就是32，值2：就是52
    shadowSize:   [41, 41], //  影子的大小    【值1，值2】 為具體你自定義陰影圖標的尺寸，比如我圖標尺寸是41×41，表示該圖標：寬度41像素，高度：41像素，那么值1:就是41，值2：就是41
    iconAnchor:   [16, 52],  //  圖標將對應標記點的位置 這個是重點， 【值1，值2】，值1：為圖標坐標第一個值(即32)的一半，值2：為圖標坐標第二個值(即52)
    //shadowAnchor: [4, 62],  // 相同的影子
    popupAnchor:  [1, -38] // 該點是相對於iconAnchor彈出信息的位置  這個是我手動調出來的，文檔默認原始值是[-1，-76]，我是去一半值，取一半值調出來的
});

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

 注：

iconAnchor 主要是這個參數，它表示 圖片的那個位置 對着 經緯度點，如果沒有這個的話，你會發現 當你點擊地圖 添加一個marker的時候 ，圖片的左上角是點擊地圖的位置。設置這個屬性之后marker的 尖會對着 你點的位置。

shadowAnchor 這個是陰影圖片的偏移量，不設置會跟iconAnchor 一致，可以不設置，

 

var LeafIcon = L.Icon.extend({
    options: {
        shadowUrl: 'leaf-shadow.png',
        iconSize:     [38, 95],
        shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
    redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
    orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");