在Google Maps JS API中为标记添加数字

Question

目前，我的标记显示如下，但没有数字表示该确切位置中有多个项目。

我希望标记显示如下：

我能够根据确切的位置在后端分组项目，这很好，但是我似乎找不到一种方法来添加特殊编号/计数以显示其中有多少项目，而不用创建带有编号的特殊图像画在他们身上。 关于如何做到这一点的想法？

如果我不能干净地做的另一个方向是使用PIL将数字添加到图像中。 我仍然认为那不是理想的。

Answer 1

因此，您要做的是在自定义标记中注入HTML而不是图像。 从本质OverlayViews ，这是您在做什么，但是google允许您OverlayViews ，甚至是HTML类型的。 见小提琴

HTMLMarker.prototype.onAdd= function(){
    div = document.createElement('DIV');
    div.className = "htmlMarker";
    div.innerHTML = '<img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View" style="width:30px;height:22px">'+ 'your number count'; //This HTML here is driven by your login to have numbers.
    var panes = this.getPanes();
    panes.overlayImage.appendChild(div);
}

=== [ 更新 ] ===

因此， 我尝试检查是否可以在地图上添加多个叠加层 。 我可以，但是它们以某种方式最终出现在同一位置，并且我尝试了多次迭代，但是在将它们分离出来方面并不是很成功。

因此，由于您本质上是在寻找标记的编号方式，因此我四处寻找解决该问题的其他方法。 我在Google地图上找到了这个带有标签的标记库。

您可以在这里找到有关如何自定义标记的小提琴。