Leaflet Map Icon—创建标记时要提供的图标

Leaflet Map Icon—创建标记时要提供的图标

Usage example

用法示例

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);

L.Icon.Default extends L.Icon and is the blue icon Leaflet uses for markers by default.

L.Icon.Default 扩展了 L.Icon,是 Leaflet 默认用于标记的蓝色图标。

Creation

FactoryDescription
L.icon(<Icon optionsoptions)Creates an icon instance with the given options.
使用给定选项创建图标实例。

Options

OptionTypeDefaultDescription
iconUrlStringnull(required) The URL to the icon image (absolute or relative to your script path).
(必填)图标图像的 URL(绝对或相对于脚本路径)。
iconRetinaUrlStringnullThe URL to a retina sized version of the icon image (absolute or relative to your script path). Used for Retina screen devices.
图标图像的视网膜大小版本的 URL(绝对或相对于脚本路径)。用于视网膜屏幕设备。
iconSizePointnullSize of the icon image in pixels.
图标图像的大小(以像素为单位)。
iconAnchorPointnullThe coordinates of the “tip” of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker’s geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.
图标“尖端”的坐标(相对于其左上角)。图标将对齐,以便此点位于标记的地理位置。如果指定了大小,则默认居中,也可以在 CSS 中设置负边距。
popupAnchorPoint[0, 0]The coordinates of the point from which popups will “open”, relative to the icon anchor.
弹出窗口将“打开”的点相对于图标锚点的坐标。
tooltipAnchorPoint[0, 0]The coordinates of the point from which tooltips will “open”, relative to the icon anchor.
工具提示将“打开”的点相对于图标锚点的坐标。
shadowUrlStringnullThe URL to the icon shadow image. If not specified, no shadow image will be created.
图标阴影图像的 URL。如果未指定,则不会创建阴影图像。
shadowRetinaUrlStringnull
shadowSizePointnullSize of the shadow image in pixels.
阴影图像的大小(以像素为单位)。
shadowAnchorPointnullThe coordinates of the “tip” of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).
阴影“尖端”的坐标(相对于其左上角)(如果未指定,则与 iconAnchor 相同)。
classNameString''A custom class name to assign to both icon and shadow images. Empty by default.
要分配给图标和阴影图像的自定义类名。默认为空。
crossOriginBoolean|StringfalseWhether the crossOrigin attribute will be added to the tiles. If a String is provided, all tiles will have their crossOrigin attribute set to the String provided. This is needed if you want to access tile pixel data. Refer to CORS Settings for valid String values.
是否将跨源属性添加到磁贴中。如果提供了字符串,则所有磁贴的 crossOrigin 属性都将设置为提供的字符串。如果要访问切片像素数据,则需要执行此操作。有关有效的字符串值,请参阅 CORS 设置。

Methods

MethodReturnsDescription
createIcon(<HTMLElement> 
oldIcon?)
HTMLElementCalled internally when the icon has to be shown, returns a <img> HTML element styled according to the options.
当必须显示图标时,在内部调用,返回根据<img>选项设置样式的 HTML 元素。
createShadow(<HTMLElement> 
oldIcon?)
HTMLElementAs createIcon, but for the shadow beneath it.
作为createIcon,但为了它下面的阴影。

Icon.Default

A trivial subclass of Icon, represents the icon to use in Markers when no icon is specified. Points to the blue marker image distributed with Leaflet releases.

图标的一个简单子类,表示未指定图标时要在标记中使用的图标。指向随传单发布一起分发的蓝色标记图像。

In order to customize the default icon, just change the properties of L.Icon.Default.prototype.options (which is a set of Icon options).

为了自定义默认图标,只需更改L.Icon.Default.prototype.options的属性(这是一组图标选项)。

If you want to completely replace the default icon, override the L.Marker.prototype.options.icon with your own icon instead.

如果要完全替换默认图标,请改为用您自己的图标覆盖 L.Marker.prototype.options.icon。

OptionTypeDefaultDescription
imagePathStringIcon.Default will try to auto-detect the location of the blue icon images. If you are placing these images in a non-standard way, set this option to point to the right path.
Icon.Default 将尝试自动检测蓝色图标图像的位置。如果以非标准方式放置这些图像,请将此选项设置为指向正确的路径。
5 1 投票
文章评分
订阅评论
提醒
0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x