带有 Google Maps Api 3 的自定义和编号图标 + 信息窗口答案

【问题标题】：Customized and numbered icons + info windows with Google Maps Api 3带有 Google Maps Api 3 的自定义和编号图标 + 信息窗口
【发布时间】：2017-02-18 19:13:35
【问题描述】：

首先想说的是，我是这方面的新手，对 Javascript 的了解不多。只需要创建一个网站，但付不起别人为我做的费用！

我正在尝试构建的是一张地图，我可以在其中找到我自己创建的多个不同标记。它们是不超过 20KB 的 .png 文件。我已将它们加载到图像/数字/中的服务器。它们看起来像这样：

我可能需要 50 多个，每个都有自己的信息窗口。

这是我尝试编辑但无法使其工作的示例：

https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers?hl=es

这里是我到目前为止的 javascript 代码：

     var map;
  function initialize() {
      map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: new google.maps.LatLng(41.388426, 2.171339),
      mapTypeId: 'roadmap'

    });

    var iconBase = 'images/numbers/';
    var icons = {
      001: {
        icon: iconBase + '001.png'
      },
      002: {
        icon: iconBase + '002.png'
      }
    };

    function addMarker(feature) {
      var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
      });
    }

    var features = [
      {
        position: new google.maps.LatLng(41.388426, 2.171339),
        type: '001'
      }, {
        position: new google.maps.LatLng(41.387815, 2.139496),
        type: '002'
      }
    ];

    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
    }
  }

希望您能提供帮助！谢谢sss

【问题讨论】：

很高兴知道什么不起作用...
@MrUpsidown 对不起，你是对的！问题是我在地图上看不到标记...
您的 JavaScript 控制台中是否有任何错误？
@MrUpsidown 是的！这：未捕获的类型错误：无法读取未定义的属性“图标”
你应该学习如何调试。使用console.log(xxx); 在您的 JS 控制台中记录变量和对象。这很有帮助。 icons 对象中的键是 001 和 002，features 类型是 '001' 和 '002'。尝试更改其中一个或另一个，以使它们属于同一类型。

标签： javascript google-maps-api-3 marker infowindow

【解决方案1】：

我能看到的主要问题在于您的for 循环。

尝试用这个替换它：

for (var i = 0, i<features.length; i++) {
  addMarker(features[i]);
}

然后，就像 cmets 中提到的 @MrUpsidown 一样，您应该在 icons 数组中正确定义您的对象。

var icons = {
  '001': {
    icon: iconBase + '001.png'
  },
  '002': {
    icon: iconBase + '002.png'
  }
};

由于在features中定义为字符串，所以在icons中应该是一样的。

其余的看起来还可以。

【讨论】：