如何獲取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); 
}; 

〜