-1

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

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

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

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

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

4

2 回答 2

3

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

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

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

map.data.setStyle(function(feature) {
  return {
  icon: 'http://URLTOYOURICON/' + feature.getProperty('PROPERTYNAME') + '.png',
  };
});
于 2014-05-06T13:01:43.100 回答
1

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

  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]
    });
于 2013-10-11T20:02:16.630 回答