使用数据库中的数据调用图像，并将其用作传单中的标记图像

Use data from database to call an Image and use it as marker image in leaflet

本文关键字：图像 单中 数据库 数据 调用      更新时间：2023-09-26

美好的一天，我只想问一些关于标记的事情。
1.我有一个由3个gif组成的文件夹，即火灾，卡纳普和凶杀案
2.我还有一个数据库，一个表，里面我有一个字段名称"icon_name"和其他字段 3.这是我的图像文件夹位置C:'wamp'www'wew'legends

这是我的代码：

      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,{iconUrl: 'C:'wamp'www'New System CS'SanBartolome'wew'legends' + data[i].icon_name + '.gif'}); 
       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');
       });
     } 
  });
}

这是get_info.php 

<?php 
$db = new PDO('mysql:host=localhost;dbname=poi', 'root', ''); 
$sql = "SELECT name,user_date,user_time,address,lat,lng,icon_name FROM tblmarker"; 
$rs = $db->query($sql); 
if (!$rs) { 
    echo "An SQL error occured.'n"; 
    exit; 
} 
$rows = array(); 
while($r = $rs->fetch(PDO::FETCH_ASSOC)) { 
    $rows[] = $r; 
    $name[] = $r['name'];
    $user_date[] = $r['user_date'];
    $user_time[] = $r['user_time'];
    $address[] = $r['address'];
    $icon_name[] = $r['icon_name'];
} 
print json_encode($rows); 
$db = NULL; 
?>

这是它的作用：

1.调用我的get_info.php，其中包含一个代码select * from tablename
2.var位置：获取数据库中
经纬度和经度的值3.创建标记(默认标记(
4.从数据库中获取数据并将其传输到传单绑定弹出

结果是使用数据库中的数据生成的地图中的默认标记。

这是我的问题：如何将表字段"icon_name"内的数据传递到标记图像中？我的意思是使用icon_name数据调用文件夹中的图像并将其用作标记。

蒂亚

试试这个。使用您自己的图标文件夹路径。

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: '/path/to/icons/' + data[i].icon_name}); 
       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');
       });
     } 
  });
}

如果icon_name后添加+ '.gif' icon_name不包含文件扩展名。

相关文章：