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 show原型并将其设置在那里。

> 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 事件部分，则mouseover的行定义参数是：

c:Cluster

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

mc:MarkerClusterer

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

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 _。

更改Google Maps v3 MarkerClustererPlus标题

3 个答案: