更改 Google Maps v3 MarkerClusterPlus 标题

Question

我正在尝试动态设置群集图标的群集标题、翻转文本。我希望在翻转文本中使用集群计数/总数。

通过console.log 我可以看到title 已更改为var txt 的设置。它也适用于alert( txt )。集群的默认标题是""，似乎没有得到更新并保持默认值。

目前我在google.maps.event.addListener( markerClusterer, 'mouseover', function( cluster ) {})中设置标题。

我认为我的代码会继续执行，这可能是我看不到更改但无法缩小范围的原因。

var latlng = new google.maps.LatLng( lat, lng );

        var qs      = location.search;          
        var options = {
            zoom: 17,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControlOptions: { 
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
            }
        };

        map = new google.maps.Map( mapId[0], options );

        google.maps.event.addListener( map, 'idle', function() {

            var bounds = map.getBounds();

            downloadXML( ABSPATH + 'xml/maps/markers.php' + qs + '&bounds=' + bounds, function( data ) {

                var xml     = parseXml( data );
                var markers = xml.documentElement.getElementsByTagName( "marker" );
                var markerArray = [];

                for ( var i = 0; i < markers.length; i++ ) {

                    var attributes = getMarkerAttributes( markers[i] );
                    var marker     = createMarker( attributes );

                    // Add marker to marker array
                    markerArray.push(marker);

                }

                // Define the marker clusterer
                var clusterOptions = { 
                    zoomOnClick: false,
                    gridSize: 1
                }

                var markerClusterer = new MarkerClusterer( map, markerArray, clusterOptions );

                // Listen for a cluster to be clicked
                google.maps.event.addListener( markerClusterer, 'clusterclick', function( cluster ) {
                    combineInfoWindows( cluster );              
                });

                // Listen for a cluster to be hovered and set title
                google.maps.event.addListener( markerClusterer, 'mouseover', function( cluster ) {
                    var txt = 'There are ' + cluster.getSize() + ' properties at this location.';
                    //alert( txt );
                    console.log( cluster );
                    markerClusterer.setTitle( txt );
                });

            }); // downloadXML

        }); // google.maps.event.addListener( map, 'idle', ... )

任何帮助将不胜感激。谢谢！

编辑：1

我有一个基于 Rick 建议解决方案的解决方案。

我已经修改了 onAdd 方法。

/**
 * Adds the icon to the DOM.
 */
ClusterIcon.prototype.onAdd = function () {
  var cClusterIcon = this;

// MY CHANGES - START
this.cluster_.markerClusterer_.title_ = 'There are ' + this.cluster_.getSize() + ' properties at this location.';
// MY CHANGES - END

  this.div_ = document.createElement("div");
  if (this.visible_) {
    this.show();
  }

...

};

编辑：2 - 最终解决方案

按照 Rick 的建议，将更改移动到 show 方法与之前的 onAdd 方法。在 MarkerClustererPlus 的原始源文件之外的文件中进行了更改。

/**
 * Positions and shows the icon.
 */
ClusterIcon.prototype.show = function () {
  if (this.div_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);
    if (this.cluster_.printable_) {
     // (Would like to use "width: inherit;" below, but doesn't work with MSIE)
     this.div_.innerHTML = "<img src='" + this.url_ + "'><div style='position: absolute; top: 0px; left: 0px; width: " + this.width_ + "px;'>" + this.sums_.text + "</div>";
    } else {
     this.div_.innerHTML = this.sums_.text;
    }
    //this.div_.title = this.cluster_.getMarkerClusterer().getTitle();
    // MY SOLUTION BELOW
    this.div_.title = 'There are ' + this.cluster_.getSize() + ' properties at this location.';
    this.div_.style.display = "";
  }
  this.visible_ = true;
};

Answer 1

您是否使用this 进行聚类标记？你有没有扩展它来制作你自己的 setTitle 函数？如果没有，您将不得不制作自己的标签。它本身实际上并不是一个标记。

编辑：不知道这存在。

集群图标只是从 MCOptions 中提取标题。我看不到 ClusterIcon 或 Cluster 在哪里有 setTitle 函数，所以我认为最好的办法是自己覆盖 ClusterIcon 显示原型并将其设置在那里。

> ClusterIcon.prototype.show =
> function () {   if (this.div_) {
>     var pos = this.getPosFromLatLng_(this.center_);
>     this.div_.style.cssText = this.createCss(pos);
>     if (this.cluster_.printable_) {
>       // (Would like to use "width: inherit;" below, but doesn't work with MSIE)
>       this.div_.innerHTML = "<img src='" + this.url_ + "'><div style='position: absolute; top: 0px; left: 0px; width: " + this.width_
> + "px;'>" + this.sums_.text + "</div>";
>     } else {
>       this.div_.innerHTML = this.sums_.text;
>     }
>     this.div_.title = **** Your stuff here ***
>     this.div_.style.display = "";   }   this.visible_ = true; };

Answer 2

您的问题是您试图将mouseover 事件侦听器（您在其中设置标题）分配给MarkerClusterer，但要定义mouseover 侦听器，您必须传递Cluster。

有一个MarkerClusterer.getClusters() 函数将返回Array 的Cluster 实例。您希望循环该 Array 并将 Cluster 的实例传递给您的 mouseover 事件侦听器。如果您检查 reference doc 并向下滚动到文档的 MarkerClusterer Events 部分，mouseover 的行将 Argument 定义为：

c:Cluster

这与 clusteringbegin 和 clusteringend 等事件形成对比，后者将 参数 定义为：

mc:MarkerClusterer

说了这么多，我不确定是否有一种简单的方法可以为每个Cluster 设置标题。该类没有setTitle 函数。 MarkerClusterer 上的 setTitle 仅将标题应用于 所有 Cluster 实例。我已经仔细检查了 JavaScript； Cluster 类上没有 setTitle 函数。您现在最好的选择似乎是为每个Cluster 在mouseover 处理程序中动态创建要显示的内容。您可以创建一个 InfoBox，然后在 Cluster mouseoet 事件上关闭它。不是有史以来最简单的解决方案，但它会带你到达你想去的地方。

Answer 3

我知道这是一个老问题，但它在 Google 上的搜索排名很高。无论如何，感谢此页面的提示，这是我所做的：

google.maps.event.addListener(markerCluster, 'mouseover', function (c) {
    if(c.clusterIcon_.div_){
        c.clusterIcon_.div_.title =  c.getSize() + ' businesses in this area';
    }
});

我不能保证它将与 MarkerClusterer Plus 的未来版本兼容，因为我使用的是“私有”属性 clusterIcon_ 和 div_。