JavaScript Google Maps Marker数组返回长度异常问题排查

你在JS里声明了数组cityMarkers，通过cityMarkers[element.name]添加Google地图Marker实例，但获取数组长度时结果一直是0，代码和控制台输出如下：

代码示例 #

var cityMarkers = []; 
cityMarkers[element.name] = new google.maps.Marker({ ... }); 

控制台输出 #

[Piacenza: _.te, Voghera: _.te, Valenza: _.te] 
Piacenza: _.te {__gm: {…}, gm_accessors_: {…}, position: _.K, gm_bindings_: {…}, map: Wf, …} 
Valenza: _.te {__gm: {…}, gm_accessors_: {…}, position: _.K, gm_bindings_: {…}, map: Wf, …} 
Voghera: _.te {__gm: {…}, gm_accessors_: {…}, position: _.K, gm_bindings_: {…}, map: Wf, …} 
length: 0 
__proto__: Array(0)

问题根源 #

你这里犯了一个常见的小误区：把JavaScript数组当成普通对象来用了。

JS里的数组本质上也是对象，但它的length属性只和数字索引的元素挂钩。当你用字符串（比如element.name的值Piacenza）作为键给数组赋值时，你其实是在给这个数组对象添加自定义属性，而不是往数组里添加真正的元素。这些属性不会被算进数组的length里，所以你看到的length始终是0——控制台里显示的那些城市名对应的Marker，都是数组对象的额外属性，不是数组的元素。

解决方案 #

根据你的需求，有两种修正方式：

1. 改用普通对象（推荐，如果你需要按城市名快速查找Marker）

直接把cityMarkers声明为对象，这样用字符串键赋值就是完全合理的：

var cityMarkers = {}; // 把数组改成普通对象
cityMarkers[element.name] = new google.maps.Marker({ ... }); 

之后要获取元素数量，可以用Object.keys(cityMarkers).length；要访问特定城市的Marker，直接用cityMarkers['Piacenza']或者cityMarkers.Piacenza即可。

2. 继续用数组（如果需要保持元素顺序或使用数组方法）

如果确实需要数组结构，就把每个城市名和对应的Marker包装成对象，用push方法添加到数组中：

var cityMarkers = [];
cityMarkers.push({
  cityName: element.name,
  marker: new google.maps.Marker({ ... })
});

这时cityMarkers.length就会正确显示元素数量。要找到特定城市的Marker，可以用数组的find方法：

const piacenzaMarker = cityMarkers.find(item => item.cityName === 'Piacenza').marker;

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