markerclusterer：集羣圖標的錨點偏移

Question

我試圖略微偏移由Google Maps Markerclusterer（V3）創建的集羣圖標。修改現有的代碼很短，我無法找到一種方法來做到這一點。有人有想法嗎？

您可以在其中提供自定義圖像網址的樣式對象接受錨定屬性，但這是爲了抵消生成的標記項目計數。

謝謝！

Answer 1

您可以在集羣圖標的PNG的一側添加一些透明空間，以便您希望居中的圖標部分實際上也位於您的PNG中心。這不應該增加圖像的重量超過幾個字節。

Answer 2

正確的方式做到這一點是調整anchorIcon屬性是這樣的：

var clusterStyles = [ 
{ 
    height: 64, 
    width: 53, 
    anchorIcon: [20, 140] 
}, 
{ 
    height: 64, 
    width: 53, 
    anchorIcon: [20, 140] 
}, 
{ 
    height: 64, 
    width: 53, 
    anchorIcon: [20, 140] 
} 
]; 

var mcOptions = { 
    styles: clusterStyles 
}; 

var markerCluster = new MarkerClusterer(map, markers, mcOptions); 

Answer 3

接受的答案不爲我工作不夠好 - 加透明空間的圖標圖像可以改變點擊方式懸停事件的行爲是由於對象的大小增加。

anchorIcon屬性另一方面只存在於Marker Clusterer Plus，而不是其他Marker Clusterer插件。對於那些由於某些原因不想切換插件的用戶，您可以覆蓋ClusterIcon.prototype.getPosFromLatLng_。 ClusterIcon對象是全局的，所以我們可以在我們自己的腳本中做到這一點，而不會搞亂插件的源代碼。 這將錨標記圖標的底部：

ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) { 
    var pos = this.getProjection().fromLatLngToDivPixel(latlng); 
    pos.x -= parseInt(this.width_/2); 
    pos.y -= parseInt(this.height_); 
    return pos; 
}; 

Answer 4

錨/ anchorIcon /錨文本的屬性並沒有爲我工作...所以我做了一種變通方法：

我用setCalculator()功能設置集羣文字：

https://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

當我設置我包裹與<span>值集羣文本屬性， 東西像這樣：

markerCluster.setCalculator(function (markers) { 
    return { 
     text: '<span class="myClass">' + value+ '</span>', 
     index: index     
    }; 
}); 

現在你可以控制到簇標籤位置「.myClass」：

span.myClass{ 
    position: relative; 
    top: -15px; 
    ..... 
} 

Answer 5

我改變marcerclusterer.js的代碼通過修改以下兩個功能來支持錨文本參數：

/** 
* Sets the icon to the the styles. 
*/ 
ClusterIcon.prototype.useStyle = function() { 
    var index = Math.max(0, this.sums_.index - 1); 
    index = Math.min(this.styles_.length - 1, index); 
    var style = this.styles_[index]; 
    this.url_ = style['url']; 
    this.height_ = style['height']; 
    this.width_ = style['width']; 
    this.textColor_ = style['textColor']; 
    this.anchor_ = style['anchor']; 
    this.anchorText_ = style['anchorText']; //added to support anchorText parameter by Frane Poljak, Locastic 
    this.textSize_ = style['textSize']; 
    this.backgroundPosition_ = style['backgroundPosition']; 
}; 


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

     ////added to support anchorText parameter by Frane Poljak, Locastic 

     if (typeof this.anchorText_ === 'object' && typeof this.anchorText_[0] === 'number' && typeof this.anchorText_[1] === 'number') { 
      this.div_.innerHTML = '<span style="position:relative;top:' + String(this.anchorText_[0]) + 'px;left:' + String(this.anchorText_[1]) + 'px;">' + this.sums_.text + '</span>' 
     } else 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(); 
    }); 
};