Javascript google映射多个自定义标记，其中数字引用列表中的项目

我希望使用javascript API创建一个google地图。我可以创建地图，自定义外观，并将默认标记添加到地图中，但

我需要创建如下所示的标记：

我知道我可以为每个项目创建多个图像，但由于页面上一次可能有数百个标记，理想情况下我不想为每个标记创建图像

每个标记都有一个编号，表示列表中的项目

---

是否可以使用HTML和CSS创建它们，因为这将允许我在以后更容易地创建额外的颜色标记。

这不是一个容易的问题，主要取决于无法同时显示的标记的大致数量。 标记可提取项只能定义为以下项之一：

• 图像的URL
• 预定义的（例如圆形或不同的箭头）
• 有效SVG格式的字符串

当您必须显示数百或数千个标记实例时，使用image还是SVG并不明显。图像是有问题的，因为您必须手动创建或生成它们，并且它们必须通过网络传输（请注意，浏览器会缓存它们，以便不会两次提取相同的标记图像）。另一方面，SVG每次出现时都必须在客户端绘制，这使得客户端的计算量非常大。在地图上显示一千多个基本SVG（一个简单的十字形状）时，我遇到了严重的延迟，而它在渲染默认标记图标时没有问题

---

我建议SVG在500个标记下，图像在这个近似值上。

而不是创建一个标记

它会让你选择使用HTML，通过CSS创建一个类似于你的示例图片的元素并不困难

一种可能的实施方式：

function HtmlMarker(map,position,content,cssText){
  this.setValues({
                  position:position,
                  container:null,
                  content:content,
                  map:map,
                  cssText:cssText
                 });

  this.onAdd = function() {
    var that      = this,container = document.createElement('div'),
        content   = this.get('content'),
        cssText   = this.get('cssText')
                     ||'border-color:#fff;background:#fff;color:#000;';
    container.className='HtmlMarker';
    container.style.cssText = cssText;

    google.maps.event.addDomListener(container,'click',
         function(){google.maps.event.trigger(that,'click');});
    if(typeof content.nodeName!=='undefined'){
      container.appendChild(content);
    }
    else{
      container.innerHTML=content;
    }


    container.style.position='absolute';
    this.set('container',container)
    this.getPanes().floatPane.appendChild(container);
  }

  this.draw=function(){
    var pos       = this.getProjection()
                     .fromLatLngToDivPixel(this.get('position')),
        container = this.get('container');
    container.style.left = pos.x - (container.offsetWidth/2)+ 'px';
    container.style.top  = pos.y - (container.offsetHeight) + 'px';
  }

  this.onRemove = function() {
    this.get('container').parentNode.removeChild(this.get('container'));
    this.set('container',null)
  }
}

overlay div将具有类名

HtmlMarker

，使用此类应用基本布局：

  .HtmlMarker {
      font-size:18px;
      margin-top:-6px;/*!*/
      padding: 4px 10px;
      position: relative;
      display:inline-block;
      cursor:pointer;
  }
  .HtmlMarker:after {
      position: absolute;
      display: inline-block;
      border-bottom: 6px solid transparent;/*!*/
      border-top: 6px solid;/*!*/
      border-top-color:inherit;
      border-right: 6px solid transparent;/*!*/
      border-left: 6px solid transparent;/*!*/
      left: 50%;
      margin-left:-6px;/*!*/
      top:100%;
      content:'';
  }

用

/*标记的属性中的6px/-6px*/定义提示的大小，修改大小时必须修改所有这些值

HtmlMarker（）
（
map，position，content
）的前3个参数应该是自解释的。
第四个参数cssText需要一个
cssText
，它提供了应用自定义CSS的选项

要定义背景色，必须将背景色和边框色设置为相同的值，例如：

border-color:white;background:white;

如果需要，可以添加更多属性，但基本上可以使用样式表应用更多样式（除了颜色，该值当然应该与背景兼容）

点击事件已经实现，更多功能也可能实现，例如

演示：
这正是我需要的。还感谢jsfiddle示例对您的帮助。