是否可以为一个位置创建两个标记？

Question

我正在开发谷歌地图实施，这基本上是一个度假公园的地图。在这里，我需要展示位于那里的房屋。我已经创建了谷歌地图与房屋作为标记，但客户希望它像这样：

所以基本上需要有一个圆圈，它打印出这样的数字/ id：

 var locations = [
    [{id: 1,  lat: 51.52382330377623,  lng:  5.137980404243535,   content: 'Kids Jungalow A'}],
    [{id: 2,  lat: 51.52365641932812,  lng:  5.138034048423833,   content: 'Kids Jungalow B'}],
    [{id: 3,  lat: 51.523512898213674, lng:  5.138157430038518,   content: 'Kids Jungalow C'}],
    [{id: 4,  lat: 51.523356025780366, lng:  5.138221803054876,   content: 'Kids Jungalow D'}],
    [{id: 5,  lat: 51.52321917917386,  lng:  5.13836664234168,    content: 'Kids Jungalow E'}],
    [{id: 6,  lat: 51.52306230572866,  lng:  5.138559761390752,   content: 'Kids Jungalow F'}],
]

是否可以在标记上附加div？我做了一个HTML标记

Answer 1

您可以在其中创建包含自定义HTML的标记。看一下Rich Marker图书馆或Marker With Label图书馆（您可以将样式设置为带数字的气泡）

这两个库都使用google.maps.OverlayView，这是您可以重复使用以创建自己的自定义标记的类的原型。标记中的内容没有限制，您可以在里面显示自己的HTML，图像，svg ......只需看看上面引用的网站中USGSOverlay.prototype.onAdd函数内的示例代码即可。你可以创建你想要的任何结构，所以你可以有这样的东西：

MyOverlay.prototype.onAdd = function() {

  var div = document.createElement('div'); //marker container div
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';

  var img = document.createElement('img'); //house image icon
  img.src = "myimages/house.png";
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'absolute';
  div.appendChild(img);

  var circle = document.createElement('div'); //house image icon
  circle.style.position = 'absolute';
  //..other circle styles/css classes to style the div in the shape of circle
  circle.innerHTML = this.number_inside_circle; //here you can set number inside the circle
  div.appendChild(circle);

  this.div_ = div;

  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

Answer 2

看看标记标签： https://developers.google.com/maps/documentation/javascript/markers#marker_labels 例如。： https://developers.google.com/maps/documentation/javascript/examples/marker-labels

但是，标记默认只接受单个字符标签。 Marker Clusterer可以执行此操作，或support ticket中还有其他一些解决方案。