将自定义标记 (HTMLMarkers) 添加到聚类

Question

我有一个Google Maps Clustering 的工作代码笔演示。我正在尝试添加自定义 html 元素标记，这样我就可以拥有像这样的动态文本：

但是，当我将自定义 html 元素标记脚本（它自己工作）添加到我的标记集群脚本时，它会中断。

这是我的脚本。如果您在损坏的部分（第 69 - 89 行）发表评论 - 它会停止工作。

// WORKING

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 37.773972,
      lng: -122.431297
    },
    gestureHandling: "greedy",
    disableDefaultUI: true
  });

  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  var markers = locations.map(function(location, i) {
    return new google.maps.Marker({
      position: location,
      label: labels[i % labels.length]
    });
  });

  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  });
}
var locations = [
  {
    lat: 37.77,
    lng: -122.44
  },
  {
    lat: 37.78,
    lng: -122.45
  },
  {
    lat: 37.79,
    lng: -122.42
  },
  {
    lat: 37.72,
    lng: -122.43
  },
  {
    lat: 37.74,
    lng: -122.42
  },
  {
    lat: 37.75,
    lng: -122.41
  },
  {
    lat: 37.75,
    lng: -122.43
  },
  {
    lat: 37.79,
    lng: -122.43
  },
  {
    lat: 37.78,
    lng: -122.43
  }
];

// BROKEN

// HTMLMarker.prototype = new google.maps.OverlayView();
// HTMLMarker.prototype.onRemove = function() {};

// HTMLMarker.prototype.onAdd = function() {
//  div = document.createElement("DIV");
//  div.className = "marker";
//  div.innerHTML = "$500";
//  var panes = this.getPanes();
//  panes.overlayImage.appendChild(div);
// };

// HTMLMarker.prototype.draw = function() {
//  var overlayProjection = this.getProjection();
//  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
//  var panes = this.getPanes();
//  panes.overlayImage.style.left = position.x + "px";
//  panes.overlayImage.style.top = position.y + "px";
// };

// var htmlMarker = new HTMLMarker(37.77, -122.43);
// htmlMarker.setMap(map);

我可以让自定义标记单独工作，也可以让标记聚类单独工作，但不能一起工作。

Answer 1

您的 HTMLMarker 定义存在许多问题。见：

• Remove HTML markers from Google Map
• Google Maps: Multiple Custom HTML Markers
• Google map HTMLMarker (loop different locations)

function HTMLMarker(lat, lng) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
  if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
    this.div.parentNode.removeChild(this.div);
}
// needed for the marker clusterer
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
  return this.pos
};
//init your html element here
// from https://stackoverflow.com/questions/29196855/google-maps-multiple-custom-html-markers
HTMLMarker.prototype.onAdd = function() {
  this.div = document.createElement('DIV');
  this.div.className = "htmlMarker";
  this.div.style.position = 'absolute';
  this.div.innerHTML = "$500";
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div);
}

HTMLMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  var panes = this.getPanes();
  this.div.style.left = position.x + 'px';
  this.div.style.top = position.y + 'px';
}

proof of concept fiddle

代码 sn-p：

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: {
      lat: 37.773972,
      lng: -122.431297
    },
    gestureHandling: "greedy",
    disableDefaultUI: true
  });

  var labels = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  var markers = locations.map(function(location, i) {
    var htmlMarker = new HTMLMarker(location.lat, location.lng);
    return htmlMarker;
  });
  // var htmlMarker = new HTMLMarker(37.77, -122.43);
  //  htmlMarker.setMap(map);
  var markerCluster = new MarkerClusterer(map, markers, {
    imagePath: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m"
  });
}
google.maps.event.addDomListener(window, 'load', initMap);
var locations = [{
    lat: 37.77,
    lng: -122.44
  },
  {
    lat: 37.78,
    lng: -122.45
  },
  {
    lat: 37.79,
    lng: -122.42
  },
  {
    lat: 37.72,
    lng: -122.43
  },
  {
    lat: 37.74,
    lng: -122.42
  },
  {
    lat: 37.75,
    lng: -122.41
  },
  {
    lat: 37.75,
    lng: -122.43
  },
  {
    lat: 37.79,
    lng: -122.43
  },
  {
    lat: 37.78,
    lng: -122.43
  }
];


function HTMLMarker(lat, lng) {
  this.lat = lat;
  this.lng = lng;
  this.pos = new google.maps.LatLng(lat, lng);
}
HTMLMarker.prototype = new google.maps.OverlayView();
HTMLMarker.prototype.onRemove = function() {
  if (this.div && this.div.parentNode && this.div.parentNode.removeChild)
    this.div.parentNode.removeChild(this.div);
}
HTMLMarker.prototype.getDraggable = function() {};
HTMLMarker.prototype.getPosition = function() {
  return this.pos
};
//init your html element here
// from https://stackoverflow.com/questions/29196855/google-maps-multiple-custom-html-markers
HTMLMarker.prototype.onAdd = function() {
  this.div = document.createElement('DIV');
  this.div.className = "htmlMarker";
  this.div.style.position = 'absolute';
  this.div.innerHTML = "$500";
  var panes = this.getPanes();
  panes.overlayImage.appendChild(this.div);
}

HTMLMarker.prototype.draw = function() {
  var overlayProjection = this.getProjection();
  var position = overlayProjection.fromLatLngToDivPixel(this.pos);
  var panes = this.getPanes();
  this.div.style.left = position.x + 'px';
  this.div.style.top = position.y + 'px';
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.htmlMarker {
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  color: white;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js"></script>
<div id='map'></div>