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

Question

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

谢谢。

Answer 1

看起来Google Maps API没有提供返回标记DOM元素的方法。

你只是想创建自己的自定义标记吗？如果是这样，你可以创建一个扩展GOverlay的标记类。 MarkerLight是一个很好的例子，说明如何完成这个（这里是example page）。

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

Answer 2

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

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

然后可以使用marker.getDOMElement().style动态地更改标志的造型，和marker.getDOMElement()的img子元素使用的图标，所以你可以改变动态了。

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

〜