Leaflet初体验0x2：使用自定义标记图标

最新推荐文章于 2024-05-27 14:56:26 发布

原创

最新推荐文章于 2024-05-27 14:56:26 发布 · 3.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#leaflet #Marker #Icon #leaflet自定义标记 #地图标注

这篇博客介绍了如何在Leaflet中使用自定义图标来标记地图位置，详细讲解了从准备图片到创建和定义图标类的过程，并提供了完整的页面代码示例。

准备图片：

创建图标：

//通过L.Icon定义图标对象
var greenIcon = L.icon({
	iconUrl:'./leaf-green.png',
	shadowUrl:'./leaf-sahdow.png',

	iconSize:[38,95],
	shadowSize:[50,64],
	iconAnchor:[22,94],//标记点在图标上位置
	shadowAnchor:[4,62],
	popupAnchor:[-3,-76]
});
//添加标记
L.marker([42.02,121.66],{icon:greenIcon}).addTo(mymap);