Cách lấy phần tử DOM HTML của điểm đánh dấu Google Maps?

Question

Với biến GMarker JS, làm thế nào để có được phần tử DOM HTML đại diện cho nó? Tôi cần điều này để tôi có thể chèn <div> của riêng tôi vào bản đồ với chỉ mục z chính xác.

Cảm ơn.

Answer 1

Dường như API Google Maps không cung cấp phương thức trả về phần tử DOM của người đánh dấu.

Bạn chỉ muốn tạo điểm đánh dấu tùy chỉnh của riêng mình? Nếu có, bạn có thể tạo một lớp đánh dấu mở rộng GOverlay. MarkerLight là một ví dụ tuyệt vời về cách thực hiện điều này (và đây là example page).

Nếu tất cả những gì bạn cần là biểu tượng tùy chỉnh, here là cách thực hiện điều đó.

Answer 2

Xin lỗi bạn đã đăng lên câu hỏi cũ như vậy, nhưng tôi đã tự mình bắt gặp điều này. Giải pháp tôi đã sử dụng trong Google Maps APIv3 là sao chép "Marker tùy chỉnh" từ the Google Maps samples và thêm một phương thức đơn giản getDOMElement, trả về số div được tạo trong quá trình xây dựng của Marker.

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

Sau đó bạn có thể sử dụng marker.getDOMElement().style để tự động thay đổi phong cách của điểm đánh dấu của bạn, và các yếu tố img con của marker.getDOMElement() là biểu tượng được sử dụng, vì vậy bạn có thể thay đổi điều đó động quá.

Answer 3

Trình chỉnh sửa tùy chỉnh đơn giản này tôi đang sử dụng. Chỉ cần cung cấp một phần tử DOM cho nó và nó sẽ được sử dụng làm điểm đánh dấu!

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

~