Google지도 api v3 : MarkerClusterer 아이콘의 텍스트 위치

Question

Calculator 기능이 실행될 때 MarkerClusterer 아이콘에 표시되는 텍스트와 다른 위치를 설정하려고합니다. 아이콘 안의 텍스트를 조금 더 움직일 수 있습니까?

어떻게하면됩니까?

감사합니다.

Answer 1

내가 사용하고 있다고 생각하는 코드를 사용하고 있다고 가정합니다.이 경우에는 markerclusterer.js 코드를 직접 수정해야합니다.

그 코드 안에는 기본적으로 각 클러스터 요소의 스타일을 설정하는 ClusterIcon.prototype.createCss() ...이라는 메서드가 있습니다 (실제로는 div뿐입니다). 맨 위에 표시 할 숫자 텍스트를 변경하지 않으려면 다음을 수행 할 수 있습니다. 예 : line-height 속성을 수정하십시오. 여기

는 예입니다 : 내가 DIV 요소 HTML에 무슨 볼 경우 지금

/** 
* Create the css text based on the position of the icon. 
* 
* @param {google.maps.Point} pos The position. 
* @return {string} The css style text. 
*/ 
ClusterIcon.prototype.createCss = function(pos) { 

    var style = []; 
    style.push('background-image:url(' + this.url_ + ');'); 
    var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0'; 
    style.push('background-position:' + backgroundPosition + ';'); 

    if (typeof this.anchor_ === 'object') { 
    if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 && 
     this.anchor_[0] < this.height_) { 
     style.push('height:' + (this.height_ - this.anchor_[0]) + 
      'px; padding-top:' + this.anchor_[0] + 'px;'); 
    } else { 

     // 
     // See the (this.height_ - 10) for line-height 
     // 

     style.push('height:' + this.height_ + 'px; line-height:' + (this.height_ - 10) + 
      'px;'); 
    } 
    if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 && 
     this.anchor_[1] < this.width_) { 
     style.push('width:' + (this.width_ - this.anchor_[1]) + 
      'px; padding-left:' + this.anchor_[1] + 'px;'); 
    } else { 
     style.push('width:' + this.width_ + 'px; text-align:center;'); 
    } 
    } else { 

    // 
    // See the (this.height_ - 10) for line-height 
    // 

    style.push('height:' + this.height_ + 'px; line-height:' + 
     (this.height_ - 10) + 'px; width:' + this.width_ + 'px; text-align:center;'); 
    } 

    var txtColor = this.textColor_ ? this.textColor_ : 'black'; 
    var txtSize = this.textSize_ ? this.textSize_ : 11; 

    style.push('cursor:pointer; top:' + pos.y + 'px; left:' + 
     pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' + 
     txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold'); 

    return style.join(''); 
}; 

, 그것은 다음과 같습니다

<div style="background-image: url(http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png); height: 53px; line-height: 43px; width: 53px; text-align: center; cursor: pointer; top: 173.68359152317203px; left: 273.60742400000004px; color: black; position: absolute; font-size: 11px; font-family: Arial, sans-serif; font-weight: bold; background-position: 0px 0px;">2</div> 

위의 용맹 한 흥미로운 부분은 OFC이다. the line-height: 43px;

당신이 볼 수 있듯이, 그것의 유일한 인라인 CSS 스타일과 div입니다. 또한 클러스터의 번호 2가 단락에서 단 2의 div가 아님을 알 수 있습니다. 당신이 그것을 더 스타일을 wan't 경우에 따라서라는 방법으로 볼 수 있습니다 :

/** 
* Adding the cluster icon to the dom. 
* @ignore 
*/ 
ClusterIcon.prototype.onAdd = function() { 
    this.div_ = document.createElement('DIV'); 
    if (this.visible_) { 
    var pos = this.getPosFromLatLng_(this.center_); 
    this.div_.style.cssText = this.createCss(pos); 

    // For debugging purposes so you know what you are doing 
    // console.log(this.div_); 

    // The interesting part here is the this.div_.innerHTML  
    // You could for example add more elements inside this.div_, 
    // now it just adds the number 

    this.div_.innerHTML = this.sums_.text; 
    } 

    var panes = this.getPanes(); 
    panes.overlayMouseTarget.appendChild(this.div_); 

    var that = this; 
    google.maps.event.addDomListener(this.div_, 'click', function() { 
    that.triggerClusterClick(); 
    }); 
}; 

... 실제 div 요소에 더 많은 HTML 배치를 수정, 당신은 옵션 조정을 등의 다양한 있습니다 너는 좋아한다. see jsfiddle