Question

给定一个GMarker JS变量，我如何获得代表它的HTML DOM元素？我需要这个，所以我可以使用正确的z-index将<div>我自己的{{1}}插入到地图中。

感谢。

Answer 1

很抱歉发布这么老的问题，但我自己也遇到过这个问题。我在Google Maps APIv3中使用的解决方案是从the Google Maps samples复制“自定义标记”并添加一个简单的方法getDOMElement，该方法返回标记构造中生成的div。

CustomMarker.prototype.getDOMElement = function() {
  return this.div_;
}

然后，您可以使用marker.getDOMElement().style动态更改标记的样式，img的{{1}}子元素是使用的图标，因此您也可以动态更改它。 / p>

Answer 2

Google Maps API似乎没有提供返回标记DOM元素的方法。

您是否只想创建自己的自定义标记？如果是这样，您可以创建一个扩展GOverlay的标记类。 MarkerLight是如何实现这一目标的一个很好的例子（这里是example page）。

如果您只需要一个自定义图标，here就是如何做到的。

Answer 3

这是我正在使用的更简单的CustomMarker。只需提供一个DOM元素，它就会被用作标记！

// based on http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html

function CustomMarker(options) {
  this.options = options;
  this.element = options.element;
  this.map = options.map;
  this.position = options.position;
  this.positionFunction = options.positionFunction || function () {
    var point = this.getProjection().fromLatLngToDivPixel(this.position);
    if (point) {
      this.element.style.position = 'absolute';
      this.element.style.left = (point.x - jQuery(this.element).width()/2) + 'px';
      this.element.style.top = (point.y - jQuery(this.element).height()) + 'px';
      this.element.style.cursor = 'pointer';
    }
  };

  this.setMap(this.map);
}

CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  if (!this.div_)
    this.getPanes().overlayImage.appendChild(this.element);
  this.positionFunction();
};
CustomMarker.prototype.getPosition = function() {
  return this.position;
};
CustomMarker.prototype.setVisible = function(bool) {
  jQuery(this.element).toggle(bool);
};

〜

如何获取Google Maps标记的HTML DOM元素？

3 个答案: