如何动态将字符串转为对应变量以构建Leaflet图层组？

你需要将字符串形式的变量名转换为对应的marker对象，传入L.layerGroup中。当前代码得到的是字符串数组，而非实际的对象引用，因此触发Leaflet的类型错误。

原代码示例 #

var markers = []
var markerHouse = ... markers.push(markerHouse);
var markerAnimal = ... markers.push(markerAnimal);
var markerCar = ... markers.push(markerCar);
// 更多marker...

// 尝试构建layerGroup但失败的代码
var NewMarkers = "markerHouse, markerAnimal"; // 函数生成的字符串
var NewMarkersArray = NewMarkers.split(","); // 转为字符串数组
var NewGroup = L.layerGroup([NewMarkersArray]); // 实际传入的是字符串数组

错误信息 #

TypeError: cannot use 'in' operator to search for "_leaflet_id" in "markerHouse"

期望实现的效果 #

L.layerGroup([markerHouse, markerAnimal]); // 传入实际的marker对象数组

解决方案1：使用对象映射（推荐） #

将所有marker变量存入一个映射对象，通过字符串键名直接获取对应的对象，这是最安全可控的方式：

// 先创建marker变量
var markerHouse = ...;
markers.push(markerHouse);
var markerAnimal = ...;
markers.push(markerAnimal);
var markerCar = ...;
markers.push(markerCar);

// 创建marker映射对象，键名对应变量名，值为marker对象
const markerMap = {
  markerHouse,
  markerAnimal,
  markerCar
};

// 处理函数生成的字符串
var NewMarkers = "markerHouse, markerAnimal";
// 分割字符串并去除每个项的空白字符
var markerKeys = NewMarkers.split(",").map(item => item.trim());
// 从映射对象中取出对应的marker对象
var markerObjects = markerKeys.map(key => markerMap[key]);

// 构建layerGroup
var NewGroup = L.layerGroup(markerObjects);

解决方案2：利用全局变量（不推荐） #

如果marker变量是全局作用域下的（挂载在window对象上），可以直接通过window[key]获取，但全局变量容易引发命名冲突，不建议在复杂项目中使用：

var NewMarkers = "markerHouse, markerAnimal";
var markerKeys = NewMarkers.split(",").map(item => item.trim());
var markerObjects = markerKeys.map(key => window[key]);
var NewGroup = L.layerGroup(markerObjects);

解决方案3：通过markers数组筛选（适合已存数组的场景） #

如果你已经将所有marker存入markers数组，可以给每个marker添加自定义标识属性，再根据字符串筛选对应的对象：

// 创建marker时添加自定义type属性
var markerHouse = L.marker([lat, lng]).bindPopup('House');
markerHouse.type = 'markerHouse';
markers.push(markerHouse);

var markerAnimal = L.marker([lat, lng]).bindPopup('Animal');
markerAnimal.type = 'markerAnimal';
markers.push(markerAnimal);

// 处理目标字符串
var NewMarkers = "markerHouse, markerAnimal";
var targetTypes = NewMarkers.split(",").map(item => item.trim());
// 从markers数组中筛选出匹配type的对象
var markerObjects = markers.filter(marker => targetTypes.includes(marker.type));

var NewGroup = L.layerGroup(markerObjects);

内容的提问来源于stack exchange，提问作者Pepe