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定义存在许多问题。参见：

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

代码段

＆＃13;

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';
}

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.htmlMarker {
  background-color: black;
  border-radius: 50%;
  padding: 10px;
  color: white;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<div id='map'></div>

＆＃13;

将自定义标记（HTMLMarkers）添加到群集

1 个答案: