自定义和编号的图标 + 信息 windows 和 Google 地图 Api 3

Question

首先想说我是新手，Javascript 知识不多。只是需要创建一个网站，但付不起钱让别人帮我做！

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

我可能需要 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);
    }
  }

希望对您有所帮助！谢谢

Answer 1

我看到的主要问题是在你的 for 循环中。

尝试将其替换为：

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

然后，就像评论中提到的@MrUpsidown，你应该在icons数组中正确定义你的对象。

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

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

其他看起来没问题。

自定义和编号的图标 + 信息 windows 和 Google 地图 Api 3

Customized and numbered icons + info windows with Google Maps Api 3

javascript

google-maps-api-3

marker

infowindow