Javascript Google Maps V3-如何将标记更改为每个位置的自定义图标

在Google Maps Api v3示例中，这里的“复杂标记图标”仅显示所有位置的1个图标

我是一名Javascript新手，如何将每个位置的图标更改为不同的图标（自定义）

我已经阅读了其他关于这个问题的q，但仍然感到困惑。如果您可以解释对上面的示例进行更改，那就太好了。我正试图根据这个例子创建一个地图

---

顺便说一句-这只适用于桌面版本，目前与移动设备无关。

您需要关注的部分是图像对象的创建

  var image = {
    url: 'images/beachflag.png',
    // This marker is 20 pixels wide by 32 pixels tall.
    size: new google.maps.Size(20, 32),
    // The origin for this image is 0,0.
    origin: new google.maps.Point(0,0),
    // The anchor for this image is the base of the flagpole at 0,32.
    anchor: new google.maps.Point(0, 32)
  };

以及标记对象的创建

 var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });

请注意，标记对象是在for循环中创建的，每个标记使用完全相同的图像对象（如上所述）。图像对象被指定给

图标

属性

可以创建一组不同的图像对象。这个特别的指向“beachflag.png”。可以有许多指向不同图像的不同图像对象

我建议将它们全部存储在一个阵列中，以便于访问

然后，当您创建标记时，可以添加逻辑来更改标记的

图标

属性，以使用您创建的任何图像对象

相反，可以在创建标记时动态创建图像对象。比如

 var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: {
            url: beach[4],
            // This marker is 20 pixels wide by 32 pixels tall.
            size: new google.maps.Size(20, 32),
            // The origin for this image is 0,0.
            origin: new google.maps.Point(0,0),
            // The anchor for this image is the base of the flagpole at 0,32.
            anchor: new google.maps.Point(0, 32)
        };,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });

---

如果您正在从geojson文件加载数据，那么您将拥有一个数据类（在该类中，您可以使用地理空间数据层）查看

现在，在最新的实验版本中，您可以使用setStyle（）和一个函数，根据每个点中定义的属性加载不同的图标

变量映射是定义Google映射容器和映射选项的地方。然后可以按如下方式使用setStyle：

map.data.setStyle(function(feature) {
  return {
  icon: 'http://URLTOYOURICON/' + feature.getProperty('PROPERTYNAME') + '.png',
  };
});

---

我尝试将图标图像添加到当前的arrayvar Beach=['Bondi Beach'，33.890542，151.274856，4，icon1.png]，'Coogee Beach'，33.923036，151.259052，5，icon2.png]，'Cronulla Beach'，34.028249，151.157507，3，icon3.png]，'Manly Beach'，33.80010128657071，151.287420854187，2，icon4.png]，['Maroubra Beach'，-33.950198151.259302，1，icon5.png]；但不起作用，我需要在数组中声明图标槽吗？你在说什么数组？如果你要这样做，那么你必须给Beach打电话[4]数组的元素。我在回答中编辑了第二个示例以反映这一点。请注意，如果图标与网页文件不在同一目录中，则图标必须是路径。thnx，我将使用它。