谷歌映射多个自定义标记，其数字引用列表中的项目答案

【问题标题】：google maps multiple custom markers with numbers referencing to item in list谷歌映射多个自定义标记，其数字引用列表中的项目
【发布时间】：2014-06-23 09:33:24
【问题描述】：

我正在寻找使用 javascript API 创建谷歌地图。我可以创建地图、自定义外观并向地图添加默认标记，但是...

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

我知道我可以通过为每个项目创建多个图像来做到这一点，但由于一次页面上可能有数百个标记，我理想情况下不想为每个单独的标记创建图像。

每个标记都有一个数字，表示列表中的一个项目。

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

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

你可以创建一个custom overlay而不是一个标记

它将为您提供使用 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 将具有 className 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定义了tip的大小，修改大小时必须修改所有这些值。

HtmlMarker() (map,position,content) 的前 3 个参数应该是不言自明的。第 4 个参数 cssText 需要一个 cssText，它为您提供了应用自定义 CSS 的选项。

要定义背景颜色，您必须将background 和 border-color 设置为相同的值：例如：

border-color:white;background:white;

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

已经实现了点击事件，还可以实现更多功能，例如draggable-option。

演示：http://jsfiddle.net/doktormolle/5arST/

【讨论】：

这正是我所需要的。还要感谢 jsfiddle 的例子，它有很大帮助。

【解决方案2】：

这不是一个简单的问题，主要取决于您一次无法显示的标记的大致数量。标记可绘制对象只能定义为以下之一：

图片的网址
预定义Symbol path（如圆圈或不同箭头）
有效的 SVG 格式的字符串

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

我会推荐 SVG 低于 500 个标记和超过这个近似数字的图像。

【讨论】：