Leaflet：如何将文本标签添加到自定义标记图标？

Question

是否可以将文字添加到自定义图标标记？我想避免在图像编辑器中编辑图标只是为了添加文本。

我已经创建了我的自定义图标标记：

var airfieldIcon = L.icon({
        iconUrl: 'images/airfield.png',
        iconSize: [48,48]
});

var airfield = L.geoJson (airfield, {
    pointToLayer: function(feature,latlng){
        return L.marker(latlng, {
            icon: airfieldIcon
        })
    }
}).addTo(map);

我如何添加文字＆＃34;班夫机场＆＃34;作为此图标的标签？使用图像编辑器是最简单，最有效的方法吗？如果是这样，我会采用这种方法，但想知道是否有更好的方法。谢谢！

Answer 1

您可以使用L.DivIcon：

  

表示使用简单div元素而不是图像的标记的轻量级图标。

http://leafletjs.com/reference.html#divicon

将你的图片和文字放在HTML中，撒上一些CSS，让它看起来像你想要的样子，你很高兴

new L.Marker([57.666667, -2.64], {
    icon: new L.DivIcon({
        className: 'my-div-icon',
        html: '<img class="my-div-image" src="http://png-3.vector.me/files/images/4/0/402272/aiga_air_transportation_bg_thumb"/>'+
              '<span class="my-div-span">RAF Banff Airfield</span>'
    })
});

另一种选择是使用Leaflet.Label插件：

  

Leaflet.label是用于向标记添加标签的插件。小叶动力地图上的形状。

• 存储库：https://github.com/Leaflet/Leaflet.label
• 示例：http://leaflet.github.io/Leaflet.label/

Answer 2

从传单版本1.0.0开始，您可以在不使用插件的情况下添加标签（该插件已经融入核心功能）。

示例：

enum { doSkip, isFile, isDir } testDir(char *path, char *name)
{ 
     struct stat st_buf;        
     if (strcmp(name, ".") == 0 || strcmp(name, "..") == 0) {
         return doSkip;
     }   
     stat(path, &st_buf);
     if (S_ISDIR(st_buf.st_mode))
         return isDir;
     return isFile;
}

void list(const char *path, int indentlevel)
{
     DIR *dirp = opendir(path);
     struct dirent *dentry;
     char buf[1024];
     if (!dirp) {
      printf("%*sNo access\n",indentlevel,"");
      return;
     }

     while ((dentry = readdir(dirp)) != NULL) {

        sprintf(buf,"%s/%s", path, dentry->d_name);
        switch (testDir(buf,dentry->d_name)) {
        case doSkip:
           /* do nothing */
           break;
        case isDir:
           printf("%*s%s:\n",indentlevel,"",dentry->d_name);
           list(buf,indentlevel+4);
           break;
        case isFile:
           printf("%*s%s\n",indentlevel,"",dentry->d_name);
           break;
        }
     }
     closedir(dirp);
}

int main()
{
     list(".", 0);
     return 0;
}

这会在地图上生成一个标记为＆＃34;测试标签＆＃34;它始终显示在标记图标的右侧。