如何更改 angular google 地图上的集群图标？

Question

我正在使用 angular google 地图，我正在尝试使用集群功能，但它不起作用，也许你们中的一些人可以给我提示。

这是一个 fiddle 工作但它使用默认的 google 集群图像（黄色，蓝色和红色集群），你可以看到 3 个标记，如果你缩小缩放你会看到群集。

$scope.clusterOpt = {
        calculator: function(){
            return { index: 1 , text: "HERE DUDE, CAN U SEE?", title:"Please help me guys"};
        },
        styles: [
            {
                url: "mypath/anyImage.png",
                width: 63
            }
        ],
        averageCenter: true
    };

我想自定义它，所以我根据群集上的标记数量将计算器功能添加到 return 我自己的图像之一。但是当我这样做时，集群在地图的顶部，而不是它应该在的位置，我尝试设置 avarege 属性和锚点属性但两者都无法解决这个错误。

在这个 fiddle 中，您可以看到计算器功能，return对于只有 1 个 makericoncluster 的样式数组，总是 1（特定于 bug）。当您缩小缩放时，您将看不到它应该在的位置的集群，但您会在地图顶部看到它，我也没有放图像，我只写了一个文本 "Here dude..."）（具体来说错误）。有人可以帮助我吗？

（如果你点击标记，那只是一个 "here dude, can u see?" 你将被放置在标记所在的位置）

这是我的Fiddle

Answer 1

集群样式的width（和height）属性不会缩放图像，它们会裁剪图像。所以在这个例子中你只会得到图像的裁剪部分（这是空的）。

使用CSS缩放图像，例如通过

.angular-google-map-container .cluster img {
  width:63px;
  height:93px;
}

工作fiddle：http://jsfiddle.net/5ya0svjs/30/

如何更改 angular google 地图上的集群图标？

How can I change cluster icon on angular google maps?

javascript

angularjs

google-maps

angular-google-maps