Question

我正在使用Leaflet地图构建一个网站，该网站使用数据源来填充地图和弹出窗口。这是我的JSON数据的样子：

{
  "time_exo": null,
  "time_stm": 1541787833,
  "results": [
    {
      "agency": "STM",
      "icon": "busSTMIcon",
      "vehicle_id": "22210",
      "route_id": "55",
      "trip_id": "188767688",
      "start_time": "12:59:00",
      "start_date": "20181109",
      "current_stop_sequence": 20,
      "current_status": 2,
      "lat": 45.52397,
      "lon": -73.59475
    },
    ...
}

这是我的JavaScript代码：

 $.get(dataUrl, function(data, pos_status) {
    console.log("pos call result: " + pos_status);
    // show data on map
    data.results.forEach(function(element) {
      L.marker(L.latLng(element.lat, element.lon), {
          icon: busSTMIcon
        }).addTo(posLayer)
        .bindPopup("<h3>" + element.agency + " " + element.vehicle_id + "</h3><b>Trip: </b> " + element.trip_id + "<br><b>Route: </b>" + element.route_id + "<br><b>Start: </b>" + element.start_date + element.start_time + "<br><b>Current stop sequence: </b>" + element.current_stop_sequence + "<br><b>Status: </b>" + element.current_status);
    });
 });

这是我声明busSTMIcon的方式：

var busSTMIcon = L.icon({
  iconUrl: 'https://felixinx.github.io/mtl-gtfs-rt/assets/map-bus-stm.svg',
  iconSize: [20, 20]
});

当前，我使用静态方式来使所有标记具有相同的图标。我想要基于我的数据源的图标。实现这一目标的最佳方法是什么？

Answer 1

如果您将icon变量创建为对象的一部分（可以向其中添加其他图标）：

var icons = { 
  "busSTMIcon" : L.icon({ iconUrl: 'https://felixinx.github.io/mtl-gtfs-rt/assets/map-bus-stm.svg', iconSize: [20, 20] }) 
};

然后您将写

icon: icons[element.icon]

（而不是icon: busSTMIcon）

然后它将基于element.icon

中的字符串从图标对象中动态选择合适的项目

传单：基于数据源的图标

1 个答案: