如何修改leaflet的marker图标
1.
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 = d({
options: {
shadowUrl: 'leaf-shadow.png',
iconSize:    [38, 95],
shadowSize:  [50, 64],
icon图标库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.");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。