Question

祝大家好日子我只想问一下Leaflet Markers。

我有一个数据库和一个表格，其中的字段名称为 icon_name ，它看起来像这样。

|icon_name|
___________
|FIRE     |
|HOMICIDE |
|RAINSTORM|

我还有一个名为 Legends 的文件夹，它有一个看起来像这样的文件。

Folder Name: Legends
Files Inside:

FIRE.jpg
HOMICIDE.jpg
RAINSTORM.jpg

正如您所见，jpg文件的名称在我的表格中是相同的（icon_name）

下面的代码是调用文件夹中的特定图像，并在将其放入地图之前将其用作Leaflet标记图像（注意：以下代码从数据库生成标记信息到地图中）

    var Icon1 = L.icon({ //<---Assigning a name of an image into a Leaflet Icon.
        iconUrl: 'legends/FIRE.jpg',//<--- Image Folder Location + the Image Name
        iconSize: [50, 50], //<--- Size of the image converted as icon
        iconAnchor:   [23, 50], //<--- Icons Anchor
        popupAnchor:  [3, -50] //<--- Leaflet Pop up

function getInfo() { 
    $.getJSON("get_info.php", function (data) { 
      for (var i = 0; i < data.length; i++) { 
        var location = new L.LatLng(data[i].lat, data[i].lng); 
        var marker = new L.Marker(location,{icon:Icon1}); 
           marker.bindPopup(
              data[i].name + "<br>" + 
              data[i].user_date + "<br>" + 
              data[i].user_time + "<br>" + 
              data[i].address + "<br>"
           ).addTo(map);
           marker.on('click', function(e) { // HERE YOU GO
                var ll = marker.getLatLng();
document.querySelector('#userLat1').value = ll.lat;
document.querySelector('#userLng1').value = ll.lng;
alert('You have selected a Marker that will be deleted'); 

           });
         } 
    }); 
  }

现在上面代码的输出是这样的：

来自地图不同部分的很多标记（好）所有标记图像仅为“FIRE.jpg”，即使其他标记具有HOMICIDE，RAINSTORM等的“icon_name”。

现在，这是我的一个大问题：如何将表格 icon_name 的值传递给var Icon1或iconUrl

的值

var Icon1 = L.icon({
iconUrl: 'legends/FIRE.jpg',

使得输出将是具有不同标记图像的不同标记。我希望你能理解我。 TY

根据我给出的答案，这是我测试的代码，但它不起作用。

（部分代码）

    for (var i = 0; i < data.length; i++) { 
            var location = new L.LatLng(data[i].lat, data[i].lng); 
         var Icon1 = L.icon({
               iconUrl: 'legends/FIRE.jpg',
               marker.bindPopup(
                  data[i].name + "<br>" + 
                  data[i].user_date + "<br>" + 
                  data[i].user_time + "<br>" + 
                  data[i].address + "<br>"
               ).addTo(map);

Answer 1

我不确定你在哪里设置IconURL，但是应该这样做。

var marker = data[i].marker;
var url = "legends/" + marker + ".jpg";

如何将数据库/表数据转换为文件名？

1 个答案: