样式化MarkerClusterer图标？

Question

样式化MarkerClusterer图标？

javascriptgoogle-maps-api-3markerclusterer

51

我正在使用MarkerCluster.js在我的Google Maps API中创建聚类。聚类的功能符合我的要求，但是我想以与黄色、蓝色和红色圆圈不同的样式进行样式设计。我尝试使用MarkerStyleOptions，它说你可以使用一个样式数组，最小的聚类图标排在最前面，最大的排在最后面。我尝试创建下面的代码，但是我对要使用什么语法感到非常困惑，也找不到任何好的例子。

var clusterStyles = [
    [opt_textColor: 'white'],
    [opt_textColor: 'white'],
    [opt_textColor: 'white']
];

var mcOptions = {
    gridSize: 50,
    styles: clusterStyles,
    maxZoom: 15
};
var markerclusterer = new MarkerClusterer(map, cluster, mcOptions);

- Louise McComiskey

这完全是错误的，甚至变量内部数组的语法也是错的。 - showtime

5个回答

5

永远不晚发布一篇相当有用的答案，另外您还可以查看整个MarkerClusterer文档以获取IconStyle。

更新

ehcanadian提到，还有一个谷歌地图v3实用程序库在github上可用。

- Yazan Rawashdeh

2

这是MarkerClustererPlus，我的理解是它与MarkerClusterer v3不同？ - user736893

12

这个链接已失效。 - River-Claire Williamson

7

因此，仅仅给出链接并不实用。 - Shoaib Chikate

1

该存储库已移至 https://github.com/googlemaps/js-marker-clusterer，但似乎 IconStyle 没有进行转换。 - Dylan Valade

在web.archive.org上的文档链接。希望这将永久可用http://web.archive.org/web/20160122183325/http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/docs/reference.html - Jayden Lawson

这里有一个相关的代码库：https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus - ehcanadian

3

根据最新文档，renderer是解决问题的关键。它允许您使用具有所有样式选项的标记-请参阅标记文档：

     new MarkerClusterer({
      renderer: {
        render: ({ markers, _position: position }) => {

          //here is where you return a Marker
          //and style it w/custom label/icon props
          return new google.maps.Marker({
            position: {
              lat: position.lat(),
              lng: position.lng(),
            },
            label: String(markers.length),
          });
        },
      },
      ...etc
    });

- d2d0d

3

现在您可以将自己的渲染器传递给MarkerClusterer对象，该对象返回一个类似于google.maps.Marker的标记：

const renderer = {
    render({ count, position }) {
        return new google.maps.Marker({
            label: { text: String(count), color: "white", fontSize: "10px" },
            position,
            // adjust zIndex to be above other markers
            zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
        });
    }
}

// use this if you use NPM version
const markerCluster = new MarkerClusterer({ map, markers, renderer });

// Use this if you use the CDN version
// const markerCluster = new  markerClusterer.MarkerClusterer({ markers, map , renderer});

在render方法中，您可以像定制普通标记一样定制聚合标记。有关更多详细信息，请参见https://developers.google.com/maps/documentation/javascript/custom-markers。例如，如果您只想添加特定的icon.png，则可以按照以下方式进行操作：

const icon = {
            url: '/path/to/your/icon.png',
            scaledSize: new google.maps.Size(50, 50),
};

const renderer = {
                render({ count, position }) {
                    return new google.maps.Marker({
                        label: { text: String(count), color: "white", fontSize: "10px" },
                        position,
                        icon,
                        // adjust zIndex to be above other markers
                        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
                    });
                }
            }

您还可以在https://googlemaps.github.io/js-markerclusterer/public/renderers/找到一些聚类标记渲染示例。

请参见https://developers.google.com/maps/documentation/javascript/marker-clustering，了解如何设置MarkerCluster的完整示例。

历史记录详情： MarkerCluster库已于2021年进行重写。其中一个目标是更改呈现过程。集群图标本身现在是一个google.maps.Marker，因此可以像普通标记一样进行样式设置。构造函数中的mcOptions已经不存在了。

建议的设计是将聚类和渲染的逻辑封装到开发人员可以扩展的接口中，特别是算法和渲染器。算法计算聚类，渲染器生成一个google.maps.Marker来表示聚类，而不是使用google.maps.OverlayView。

- Adam

0

Adam，请修正你的代码：const renderer = { render: ({ count, position }) => new Marker ... 以下代码运行正常：

const renderer = {
   render: ({ count, position }) =>
     new google.maps.Marker({
        icon: { url:"path_to_image_file" }, 
        label: { text: String(count), color: "white", fontSize: "10px" },
        position,
        // adjust zIndex to be above other markers
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
   }),
};

new markerClusterer.MarkerClusterer({
  map,
  markers,
  renderer,
});

- jbr

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- duncan · Accepted Answer

你需要做的是使用url来指定要使用哪些图像，而不是当前正在使用的蓝色/黄色/红色图像。可以考虑包含高度和宽度选项。

var clusterStyles = [
  {
    textColor: 'white',
    url: 'path/to/smallclusterimage.png',
    height: 50,
    width: 50
  },
 {
    textColor: 'white',
    url: 'path/to/mediumclusterimage.png',
    height: 50,
    width: 50
  },
 {
    textColor: 'white',
    url: 'path/to/largeclusterimage.png',
    height: 50,
    width: 50
  }
];