Google Maps JavaScript API图例不显示图标问题求助

嘿，我来帮你搞定这个图例图标加载的问题！先看你给出的代码片段，有几个关键踩坑点需要调整：

1. 先修正语法错误 #

你代码里的for (va...明显是笔误，应该写成for (var key in icons)，这个小错误会直接导致代码报错，图例根本没法生成。

2. 核心问题：图例不会自动识别scaledSize #

Google Maps的scaledSize属性是专门用来控制地图上标记图标的缩放尺寸的，但图例里的<img>元素完全不知道这个属性的存在！你必须手动把scaledSize的宽高赋值给img的width和height属性，不然图例里的图标要么显示原始大尺寸，要么因为没有明确尺寸导致加载异常。

3. 完整修正后的代码示例 #

var icons = {
  3: {
    name: '-39,7309 a -39,3293',
    icon: {
      url: 'https://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png',
      scaledSize: new google.maps.Size(5, 8)
    }
  },
  2: {
    name: '-39,3293 a -38,9277',
    icon: {
      url: 'https://maps.gstatic.com/mapfiles/ms2/micons/red-dot.png',
      scaledSize: new google.maps.Size(10, 17)
    }
  }
};

var legend = document.getElementById('legend');
// 修正循环语法，安全遍历图标对象
for (var key in icons) {
  if (icons.hasOwnProperty(key)) {
    var currentIcon = icons[key];
    // 创建单个图例项的容器
    var legendItem = document.createElement('div');
    
    // 创建图标img元素，手动设置尺寸
    var iconImg = document.createElement('img');
    iconImg.src = currentIcon.icon.url;
    // 把Google Maps的scaledSize转成img的宽高属性
    iconImg.width = currentIcon.icon.scaledSize.width;
    iconImg.height = currentIcon.icon.scaledSize.height;
    
    // 创建图例文字
    var labelText = document.createTextNode(' ' + currentIcon.name);
    
    // 组装图例项并添加到图例容器
    legendItem.appendChild(iconImg);
    legendItem.appendChild(labelText);
    legend.appendChild(legendItem);
  }
}

// 可选：把图例添加到地图控件，固定在地图指定位置（比如右下角）
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);

额外注意事项 #

• 用icons.hasOwnProperty(key)是为了避免遍历到对象原型链上的无关属性，代码更健壮。
• 确保页面上存在id="legend"的元素，并且给它设置基础CSS样式（比如background: white; padding: 10px; border: 1px solid #ccc;），避免被其他元素覆盖或者显示异常。

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