Question

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

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

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

我已经通过其他问题阅读了这篇文章，但仍然感到困惑。如果您可以解释为上述示例进行更改，那就太棒了。我正在尝试根据该示例创建一个地图。

btw - 这仅适用于桌面版，此时不关心移动版。

Answer 1

如果您正在从geojson文件加载数据，那么您将拥有Data类（您使用地理空间数据层的地方），请查看latest exp api reference

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

您可以在变量地图中定义Google地图容器和地图选项。然后你可以使用setStyle，如下所示：

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

Answer 2

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

  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循环中创建的，每个标记使用完全相同的图像对象（如上所定义）。图像对象被分配给icon属性。

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

我建议将它们全部存储在数组中以便于访问。

然后，当您创建标记时，可以添加逻辑以更改标记的icon属性以使用您创建的任何图像对象。

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

 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]
    });

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

2 个答案: