Fatal编程技术网

Google maps api 3 更改Google Maps v3 MarkerclusterPlus标题

google-maps-api-3

Google maps api 3 更改Google Maps v3 MarkerclusterPlus标题,google-maps-api-3,title,google-maps-markers,markerclusterer,Google Maps Api 3,Title,Google Maps Markers,Markerclusterer,我试图动态设置集群图标的集群标题，滚动文本。我希望在滚动文本中使用群集计数/总数 通过console.log我可以看到标题已更改为var txt的设置。它也适用于警报（txt）。群集的默认标题为“”，似乎没有更新，并保持默认值 目前我正在google.maps.event.addListener（markerClusterer，'mouseover'，function（cluster）{}）中设置标题 我认为我的代码会继续执行，这可能是我看不到更改的原因，但我无法缩小范围 var latlng

我试图动态设置集群图标的集群标题，滚动文本。我希望在滚动文本中使用群集计数/总数

通过
console.log
我可以看到
标题已更改为
var txt
的设置。它也适用于
警报（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', ... )


编辑：2-最终解决方案

将更改移动到
show
方法，而不是Rick建议的先前的
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;
};



/**
*定位并显示图标。
*/
ClusterIcon.prototype.show=函数（）{
如果（此.div){
var pos=this.getPosFromLatLng（this.center）；
this.div_.style.cssText=this.createCss（pos）；
if（this.cluster\可打印）{
//（希望使用下面的“宽度：继承；”，但不适用于MSIE）
this.div_u.innerHTML=“+this.sums_u.text+”；
}否则{
this.div\uz.innerHTML=this.sums\ux.text；
}
//this.div_u2;.title=this.cluster_2;.getMarkerClusterer（）.getTitle（）；
//下面是我的解决方案
this.div.title='此位置有'+this.cluster\.getSize（）+'属性'；
this.div_.style.display=“”；
}
this.visible=真；
};

您是否使用聚类标记？您是否扩展了它以生成自己的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; };



>ClusterIcon.prototype.show=
>函数（）{if（this.div）{
>var pos=this.getPosFromLatLng（this.center）；
>this.div_.style.cssText=this.createCss（pos）；
>if（this.cluster\可打印）{
>//（希望使用下面的“宽度：继承；”，但不适用于MSIE）
>this.div_u.innerHTML=“+this.sums_u.text+”；
>}其他{
>this.div\uz.innerHTML=this.sums\ux.text；
>     }
>this.div_.title=****这里是您的资料***
>this.div_u2;.style.display=”“}this.visible 2;=true；}；

您是否使用聚类标记？您是否扩展了它以生成自己的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; };



>ClusterIcon.prototype.show=
>函数（）{if（this.div）{
>var pos=this.getPosFromLatLng（this.center）；
>this.div_.style.cssText=this.createCss（pos）；
>if（this.cluster\可打印）{
>//（希望使用下面的“宽度：继承；”，但不适用于MSIE）
>this.div_u.innerHTML=“+this.sums_u.text+”；
>}其他{
>this.div\uz.innerHTML=this.sums\ux.text；
>     }
>this.div_.title=****这里是您的资料***
>this.div_u2;.style.display=”“}this.visible 2;=true；}；

您的问题是，您试图将
鼠标悬停
事件侦听器（设置标题的位置）分配给
标记群集
，但要定义
鼠标悬停
侦听器，您必须传递一个
群集

有一个
MarkerClusterer.getClusters（）
函数，它将返回
集群
实例的
数组。您希望循环该
数组
，并将
集群
的实例传递给您的
mouseover
事件侦听器。如果选中并向下滚动到文档的
MarkerClusterer
事件部分，则
鼠标上方的行将参数定义为：


c:Cluster



mc:MarkerClusterer


这与
clusteringbegin
和
clusteringend
等事件相反，它们将参数定义为：


c:Cluster



mc:MarkerClusterer



说到这里，我不确定是否有一种简单的方法来设置每个
集群的标题。该类没有
setTitle
函数。
MarkerClusterer
上的
setTitle
仅将标题应用于
集群
实例的所有。我已经再次签入了JavaScript；
Cluster
类上没有
setTitle
函数。现在，您最好的选择似乎是为每个
集群
动态创建要在
mouseover
处理程序中显示的内容。您可以创建一个，然后在
集群
鼠标集
事件中关闭它。这不是最简单的解决方案，但它会让你达到你想要的目的。
你的问题是，你试图将
鼠标悬停
事件监听器（在你设置标题的地方）分配给
标记群集
，但是要定义
鼠标悬停
监听器，你必须传递一个
群集

有一个
MarkerClusterer.getClusters（）
函数，它将返回
集群
实例的
数组。您希望循环该
数组
，并将
集群
的实例传递给您的
mouseover
事件侦听器。如果您选中并向下滚动至