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

Posted 2023-03-28

【中文标题】将自定义标记 (HTMLMarkers) 添加到聚类

【英文标题】：Adding Custom Markers (HTMLMarkers) to Clustering

【发布时间】：2018-09-01 05:14:18

【问题描述】：

我有一个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);

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

【参考方案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://***.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://***.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>