0

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

通过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与以前的方法进行了比较。在 MarkerClustererPlus 的原始源文件之外的文件中进行了更改。onAdd

/**
 * 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;
};
4

3 回答 3

2

您是否将其用于聚类标记？你有没有扩展它来制作你自己的 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; };
于 2012-05-04T16:45:29.817 回答
1

您的问题是您正在尝试将mouseover事件侦听器（设置标题的位置）分配给 a MarkerClusterer，但要定义mouseover侦听器，您必须通过 a Cluster。

有一个MarkerClusterer.getClusters()函数将返回一个Array实例Cluster。你想循环它Array并将一个实例传递Cluster给你的mouseover事件监听器。如果您检查参考文档并向下滚动到文档的MarkerClusterer 事件部分，则将参数mouseover定义为：

c:Cluster

clusteringbegin这与and之类的事件形成对比clusteringend，后者将Argument定义为：

mc:MarkerClusterer

说了这么多，我不确定是否有一种简单的方法可以为每个Cluster. 该类没有setTitle功能。上只是setTitle将MarkerClusterer标题应用于所有实例Cluster。我已经仔细检查了 JavaScript；类上没有setTitle功能Cluster。您现在最好的选择似乎是mouseover为每个Cluster. 您可以创建一个信息框，然后在Cluster mouseoet事件中将其关闭。不是最简单的解决方案，但它会让你到达你想去的地方。

于 2012-05-04T17:02:30.460 回答
1

我知道这是一个老问题，但它在 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_。

于 2014-09-23T15:34:02.800 回答