谷歌地图V3 - 如何将每个位置的标记更改为自定义图标

Google Maps V3 - How Do I Change Markers to Custom Icons for Each Location

本文关键字：图标 自定义 位置 V3 谷歌地图      更新时间：2023-09-26

在谷歌地图 API v3 示例中，此处的"复杂标记图标" - 仅显示所有位置的 1 个图标

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

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

我已经通过其他问题阅读了有关此的内容，但仍然感到困惑。如果您可以解释对上述示例进行更改，那就太好了。我正在尝试根据该示例创建地图。

顺便说一句 - 这仅适用于桌面版本，目前不关心移动设备。

如果您从 geojson 文件加载数据，那么您将拥有 数据类（这是您使用地理空间数据层的地方） 查看最新的 exp api 参考

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

变量地图是您定义 Google 地图容器和地图选项的位置。然后你可以按如下方式使用 setStyle：

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

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

  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 属性。

您可以创建一堆不同的图像对象。 这个特别指向"海滩旗.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]
    });
相关文章：