MarkerCluster 如何与 MarkerWithlabel 一起使用答案

【问题标题】：How MarkerCluster work with MarkerWithlabelMarkerCluster 如何与 MarkerWithlabel 一起使用
【发布时间】：2014-11-12 11:30:16
【问题描述】：

我的 markerwith label 工作正常，但现在我想使用 markerCluster 进行整理。我找到了tut for markerCluster，但代码对我不起作用。

我只是尝试实现最简单的例子，似乎只需要添加 1 行：

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

我也添加了js脚本。

但不起作用，标记显示但不聚集。

我认为它可能是我创建的 markerwithlabel 包含标签内容（与普通标记格式不同）以下是我在 html 中的 js 代码，这个 html 视图在 ruby on rails 视图中

<!DOCTYPE html>
<html>
<head>
<%= include_gon %>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <style type="text/css">
   .labelsn {
     color: green;
     background-color: transparent;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: left;
     width: 40px;
     white-space: nowrap;
   }

   .labelsv {
     color: blue;
     background-color: transparent;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 30px;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
 <script type="text/javascript" src="/assets/markerwithlabel.js"></script>
<script type="text/javascript" src="/assets/markerclusterer.js"></script>
 <script type="text/javascript">
   var iw=[];
   var alladdress=[];
   var allmarkers=[];
   function initMap() {

     var clatlng = new google.maps.LatLng(1.352083, 103.819836);
     var myOptions = {
         zoom: 12,
         center: clatlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
     }
      map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
     for(i=0;i<gon.astatic.length;i++){


       alladdress.push(new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]));
       if(i<gon.vnum){
       allmarkers[i] = new MarkerWithLabel({position: alladdress[i],icon:"/assets/green_MarkerV.png" ,title: gon.astatic[i][0],labelClass: "labelsv",labelContent: gon.astatic[i][3]});}
       else
       {
      allmarkers[i] = new MarkerWithLabel({position: alladdress[i],icon:"/assets/green_MarkerN.png" ,title: gon.astatic[i][0],labelClass: "labelsn",labelContent: gon.astatic[i][3]});
       }


       var mc=new MarkerClusterer(map,allmarkers); \\what I have added for cluster 
google.maps.event.addListener(map,'idle',function(){

mc.getTotalClusters();

})          
     }

   google.maps.event.addDomListenerOnce(window,'load',initialize);
   }


    var ajax_call = function() {

     $.ajax({
        type:"GET",
        url:"gmaps/test",
        dataType:"json",
        success: function(result){
        for(i=0;i<result.length;i++)
       {
       allmarkers[i].labelContent=result[i];
       allmarkers[i].label.setContent();
       }

        }})
   };
   var interval = 1000*60*5
   setInterval(ajax_call,interval);
 </script>
</head>

<body onload="initMap()">
<div id="map_canvas" style="width: 945px; height: 700px;"></div>
</body>
</html>

有没有人处理过这个问题？提前谢谢。

【问题讨论】：

定义“不起作用”
标记显示，但不聚集
我们需要查看更多您的代码、mcOptions 中的内容、您如何创建标记等
@duncan 我已经添加了代码，这段代码适用于我的markerwithlebels，我添加了几行希望它可以适用于markerCluster...
MarkerClusterer 需要一个 google.maps.Marker 对象数组。你给它一个由MarkerWithLabel 构造函数创建的数组

标签： google-maps-api-3 google-maps-markers markerclusterer

【解决方案1】：

我可以让它工作的唯一方法是使用 MarkerClustererPlus（以前版本的较新版本）。 https://github.com/mahnunchik/markerclustererplus

【讨论】：